From 1ed8063e946988fa0399a0ed74fac12aed18fe96 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Fri, 13 May 2022 12:56:30 -0400
Subject: [PATCH 01/32] fix zip type error in lookup-vin-by-address API call

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

diff --git a/src/layouts/address-lookup/address-lookup.vue b/src/layouts/address-lookup/address-lookup.vue
index a9cf1bd53..551ef94c9 100644
--- a/src/layouts/address-lookup/address-lookup.vue
+++ b/src/layouts/address-lookup/address-lookup.vue
@@ -308,8 +308,8 @@ export default {
 				{ 
 					licenseLastName: lastName, 
 					licenseStreetAddress: streetAddress, 
-					licenseZip: zip, 
-					licenseState: state 
+					licenseZip: (typeof zip !== "string") ? zip.toString() : zip;
+					licenseState: state,
 				}, false
 			);
 		},

From c07f259dfc2aa78d0469b0071457f0f0426266b0 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Fri, 13 May 2022 12:59:11 -0400
Subject: [PATCH 02/32] CSR-347: fix errant semi colon

---
 src/layouts/address-lookup/address-lookup.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/address-lookup/address-lookup.vue b/src/layouts/address-lookup/address-lookup.vue
index 551ef94c9..653825016 100644
--- a/src/layouts/address-lookup/address-lookup.vue
+++ b/src/layouts/address-lookup/address-lookup.vue
@@ -308,7 +308,7 @@ export default {
 				{ 
 					licenseLastName: lastName, 
 					licenseStreetAddress: streetAddress, 
-					licenseZip: (typeof zip !== "string") ? zip.toString() : zip;
+					licenseZip: (typeof zip !== "string") ? zip.toString() : zip,
 					licenseState: state,
 				}, false
 			);

From d56ea7cc242faadf6802a9844496da8e17202133 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 24 May 2022 13:47:07 -0400
Subject: [PATCH 03/32] Animated modal updates.

---
 .../loading-modal/loading-modal.vue           | 167 +++++++++++++++++-
 1 file changed, 160 insertions(+), 7 deletions(-)

diff --git a/src/common-components/loading-modal/loading-modal.vue b/src/common-components/loading-modal/loading-modal.vue
index e3935a8a8..c15ec7f77 100644
--- a/src/common-components/loading-modal/loading-modal.vue
+++ b/src/common-components/loading-modal/loading-modal.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="isModalVisible" class="container-fluid modal-loader">
+  <div  class="container-fluid modal-loader">
     <div class="row g-2 h-100 d-flex align-items-center">
       <div class="container-fluid overflow-hidden">
         <div class="row h-100">
@@ -11,8 +11,33 @@
         </div>
         <div class="row">
           <div class="col">
-            <p class="mb-0 text-center">We're processing your information.</p>
-            <p class="mb-0 text-center">This could take up to 30 seconds...</p>
+            <div class="text-container slide">
+              <p>Finishing up
+                <span class="dot-1">.</span>
+                <span class="dot-2">.</span>
+                <span class="dot-3">.</span>
+              </p>
+              <p>Nearly there
+                <span class="dot-1">.</span>
+                <span class="dot-2">.</span>
+                <span class="dot-3">.</span>
+              </p>
+              <p>Generating your quote
+                <span class="dot-1">.</span>
+                <span class="dot-2">.</span>
+                <span class="dot-3">.</span>
+              </p>
+              <p>Finding your glass
+                <span class="dot-1">.</span>
+                <span class="dot-2">.</span>
+                <span class="dot-3">.</span>
+              </p>
+              <p>Assessing your damage
+                <span class="dot-1">.</span>
+                <span class="dot-2">.</span>
+                <span class="dot-3">.</span>
+              </p>
+            </div>
           </div>
         </div>
       </div>
@@ -59,10 +84,6 @@ export default {
   overflow-y: auto;
   outline: 0;
   background: $gray-100;
-  p {
-    font-family: Roboto;
-    font-size: 1.125rem;
-  }
 
   .tagbg {
     background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 32'%3e%3cpath d='M22.39 27.313a3.53 3.53 0 0 0 7.058 0' fill='%23fff'/%3e%3cpath d='M22.39 27.313a3.53 3.53 0 0 0 7.058 0' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M54.459 27.313a3.527 3.527 0 0 0 7.054 0' fill='%23fff'/%3e%3cpath d='M54.459 27.313a3.527 3.527 0 0 0 7.054 0' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M42.06.8c8.08 0 11.89.935 11.89.935 3.58.576 5.696 7.207 5.696 7.207h.727c0-2.427 1.302-2.397 2.341-2 .723.292 1.363.76 1.86 1.361 1.319 1.547.465 1.674.465 1.674h-5.067l3.846 3.01v12.016c0 2.41-2.029 2.31-2.029 2.31H22.338s-2.029.1-2.029-2.31V12.996l3.84-3.009H19.07s-.853-.127.466-1.674a4.693 4.693 0 0 1 1.86-1.361c1.032-.397 2.341-.427 2.341 2h.736s2.117-6.64 5.696-7.21c0 0 3.81-.942 11.89-.942Z' fill='%23fff' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M42.06 8.847c7.924 0 14.685.511 14.685.511 0-2.585-2.38-6.011-2.38-6.011S50.4 2.519 42.06 2.519s-12.303.828-12.303.828-2.38 3.426-2.38 6.011c0 0 6.76-.51 14.683-.51Z' fill='%23DA291C' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M35.277 16.523a62.558 62.558 0 0 1 13.277 0m3.276-.439s2.384-2.257 8.608-2.257c0 0 1.179 2.657-2.54 3.37m-25.894-1.113s-2.387-2.257-8.611-2.257c0 0-1.16 2.579 2.543 3.37m-3.546 5.856s21.52 3.647 39.123 0' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
@@ -80,5 +101,137 @@ export default {
     border: 0.45em solid currentColor;
     border-right-color: transparent;
   }
+
+  .text-container {
+  display: flex;
+  width: 350px;
+  overflow: hidden;
+  white-space: nowrap;
+  margin: 0 auto;
+  position: relative;
+  &:after {
+    content: '';
+    background: rgb(245,245,245);
+    background: linear-gradient(270deg, rgba(245,245,245,1) 0%, rgba(245,245,245,0) 5%, rgba(245,245,245,0) 95%, rgba(245,245,245,1) 100%);
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  &.slide p {
+    animation: slide-in 20s ease-in-out 1s forwards 1;
+  }
+
+
+  p {
+    margin: 0 175px;
+    transform: translateX(-2346px);
+  }
+
+  @keyframes slide-in {
+    0% {
+      transform: translateX(-2346px)
+    }
+    11% {
+      transform: translateX(-2010px)
+    }
+    22% {
+      transform: translateX(-2010px)
+    }
+    33% {
+      transform: translateX(-1490px)
+    }
+    44% {
+      transform: translateX(-1490px)
+    }
+    55% {
+      transform: translateX(-985px)
+    }
+    66% {
+      transform: translateX(-985px)
+    }
+    77% {
+      transform: translateX(-490px)
+    }
+    88% {
+      transform: translateX(-490px)
+    }
+    100% {
+      transform: translateX(-40px)
+    }
+  }
+
+
+  .dot-1 {
+    animation: blinking-elipsis .75s linear infinite;
+    @keyframes blinking-elipsis {
+      0% {
+        opacity: 1;
+      }
+      65% {
+        opacity: 1;
+      }
+      66% {
+        opacity: 0;
+      }
+      100% {
+        opacity: 0;
+      }
+    }
+  }
+
+  .dot-2 {
+    animation: blinking-elipsis-2 .75s linear infinite;
+    @keyframes blinking-elipsis-2 {
+      0% {
+        opacity: 0;
+      }
+      21% {
+        opacity: 0;
+      }
+      22% {
+        opacity: 1;
+      }
+      65% {
+        opacity: 1;
+      }
+      66% {
+        opacity: 0;
+      }
+      100% {
+        opacity: 0;
+      }
+    }
+  }
+
+  .dot-3 {
+    animation: blinking-elipsis-3 .75s linear infinite;
+    @keyframes blinking-elipsis-3 {
+      0% {
+        opacity: 0;
+      }
+      43% {
+        opacity: 0;
+      }
+      44% {
+        opacity: 1;
+      }
+      65% {
+        opacity: 1;
+      }
+      66% {
+        opacity: 0;
+      }
+      100% {
+        opacity: 0;
+      }
+    }
+  }
+}
 }
 </style>

From 42f13cc88ba265ae372f43dd179b894c11ac72ee Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 24 May 2022 13:56:33 -0400
Subject: [PATCH 04/32] Add v-if.

---
 src/common-components/loading-modal/loading-modal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common-components/loading-modal/loading-modal.vue b/src/common-components/loading-modal/loading-modal.vue
index c15ec7f77..a718095f6 100644
--- a/src/common-components/loading-modal/loading-modal.vue
+++ b/src/common-components/loading-modal/loading-modal.vue
@@ -1,5 +1,5 @@
 <template>
-  <div  class="container-fluid modal-loader">
+  <div v-if="isModalVisible" class="container-fluid modal-loader">
     <div class="row g-2 h-100 d-flex align-items-center">
       <div class="container-fluid overflow-hidden">
         <div class="row h-100">

From a4d18aa008355120c83a16436cb83ea258fd5cef Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Tue, 24 May 2022 16:28:43 -0400
Subject: [PATCH 05/32] Updated unit tests for textbox-question and
 dropdown-question components

---
 jest.config.js                                |   2 -
 .../dropdown-question.spec.js                 | 170 ++++++++++++
 .../dropdown-question.spec.js1                | 131 ----------
 ...tion.spec.js1 => textbox-question.spec.js} | 243 ++++++++++--------
 4 files changed, 302 insertions(+), 244 deletions(-)
 create mode 100644 src/common-components/dropdown-question/dropdown-question.spec.js
 delete mode 100644 src/common-components/dropdown-question/dropdown-question.spec.js1
 rename src/common-components/textbox-question/{textbox-question.spec.js1 => textbox-question.spec.js} (55%)

diff --git a/jest.config.js b/jest.config.js
index 839db4378..f2c8b5f28 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -25,8 +25,6 @@ module.exports = {
     "!src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue",
     "!src/layouts/address-vehicles/address-vehicles.vue",
     "!src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue",
-    "!src/common-components/dropdown-question/dropdown-question.vue",
-    "!src/common-components/textbox-question/textbox-question.vue",
     "!src/ux-components/alert\alert.vue",
     "!src/helpers/validation-rules.js",
     // END
diff --git a/src/common-components/dropdown-question/dropdown-question.spec.js b/src/common-components/dropdown-question/dropdown-question.spec.js
new file mode 100644
index 000000000..381f34890
--- /dev/null
+++ b/src/common-components/dropdown-question/dropdown-question.spec.js
@@ -0,0 +1,170 @@
+import { shallowMount } from "@vue/test-utils";
+import dropdownQuestion from "./dropdown-question";
+
+// Mock CMS content
+const questionText = "Question Text";
+const mockMixin = {
+  methods: {
+    getCmsContent: jest.fn().mockImplementation(()=> {
+      return questionText;
+    })
+  }
+}
+
+// TODO: Remove the following from dropdown-question.vue -> :class="(errors && errors.length) || hasError ? 'has-error' : ''"
+// It is not being used.
+describe("dropdownQuestion.vue", () => {
+
+  it("Should render a select input", async () => {
+
+    // Arrange   
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        options: {},
+      },
+      mixins: [mockMixin]
+    });
+
+    wrapper.getCmsContent = jest.fn();
+
+    // Act
+    const select = wrapper.find("select");
+
+    // Assert
+    expect(select.exists()).toBe(true);
+
+  });
+  
+  it("Should render the 'questionText' data value as the label text.", async () => {
+    // Arrange
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        options: {},
+      },
+      mixins: [mockMixin]
+    });
+
+    // Act
+    const label = wrapper.find("label");
+
+    // Assert
+    expect(label.text()).toContain(questionText);
+
+  });
+
+  it("Should render the 'questionText' data value with '&NoBreak;' after the first character of each word in the label text when disableAutoFill is true.", async () => {
+    // Arrange
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        options: {},
+        disableAutoFill: true,
+      },
+      mixins: [mockMixin]
+    });
+
+    // Mock CMS content ...
+    // Trust me, the below instance of the string "Q⁠uestion Text" actually has the &NoBreak; in it. You just can't see it
+    // Don't believe me? Copy and paste it into Google. Then inspect the search field element in Dev Tools, 
+    // you will see "Q&NoBreak;uestion T&NoBreak;ext"
+    const expectedQuestionText = "Q⁠uestion T⁠ext"; 
+
+    // Act
+    const label = wrapper.find("label");
+
+    // Assert
+    expect(label.text()).toContain(expectedQuestionText);
+
+  });
+  
+  it("Should return input id as the id of the select field", async () => {
+    // Arrange
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        inputId: "input ID",
+        options: {},
+      },
+      mixins: [mockMixin]
+    });
+
+    // Act
+    const select = wrapper.find("select");
+
+    // Assert
+    expect(select.attributes().id).toEqual("input ID");
+
+  });
+  
+  it("Should render the 'questionText' data value as the aria-label attribute.", async () => {
+    // Arrange
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        options: {},
+      },
+      mixins: [mockMixin]
+    });
+
+    // Act
+    const label = wrapper.find("label");
+
+    // Assert
+    expect(label.attributes("aria-label")).toContain(questionText);
+
+  });
+
+  it("Should return aria-disabled state as disabled", async () => {
+    // Arrange
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        options: {},
+        isDisabled: true,
+      },
+      mixins: [mockMixin]
+    });
+
+    // Act
+    const select = wrapper.find("select");
+
+    // Assert
+    expect(select.attributes("aria-disabled")).toEqual("true");
+
+  });
+
+  it("Should emit new value when modelValue is changed", async () => {
+    // Arrange
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        options: {},
+        modelValue: "val",
+      },
+      mixins: [mockMixin]
+    });
+
+    // Act
+    await wrapper.find("select").setValue("val2");
+
+    // Assert
+    expect(wrapper.emitted()).toHaveProperty('change')
+
+  });
+
+  it("Should call this.handleChange with new value when selectedOption is changed", async () => {
+    // Arrange
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        options: {},
+        modelValue: 0,
+      },
+      mixins: [mockMixin]
+    });
+
+    wrapper.vm.handleChange = jest.fn().mockImplementation(() => {});
+
+    // Act
+    wrapper.vm.$options.watch.selectedOption.call(wrapper.vm, 1);
+
+    // Assert
+    expect(wrapper.vm.handleChange).toHaveBeenCalled;
+
+  });
+
+});
diff --git a/src/common-components/dropdown-question/dropdown-question.spec.js1 b/src/common-components/dropdown-question/dropdown-question.spec.js1
deleted file mode 100644
index 81669f714..000000000
--- a/src/common-components/dropdown-question/dropdown-question.spec.js1
+++ /dev/null
@@ -1,131 +0,0 @@
-import { shallowMount } from "@vue/test-utils";
-import dropdownQuestion from "./dropdown-question";
-import { nextTick } from "vue";
-import { maska } from 'maska';
-
-describe("dropdownQuestion.vue", () => {
-
-  it("Should return aria-disabled state", async () => {
-    // Act
-    const wrapper = shallowMount(dropdownQuestion, {
-      propsData: {
-        isDisabled: true,
-      },
-    });
-
-    // Assert
-    const input = wrapper.find("select");
-
-    // Expect
-    expect(input.attributes()["aria-disabled"]).toEqual("true");
-  });
-
-  it("Should render a select input", async () => {
-    // Act
-    const wrapper = shallowMount(dropdownQuestion, {
-      propsData: {
-        name: "test",
-        label: "unit test label",
-      },
-    });
-
-    // Assert
-    const input = wrapper.find("select");
-
-    expect(input.exists()).toBe(true);
-  });
-
-  it("Should return input id", async () => {
-    // Act
-    const wrapper = shallowMount(dropdownQuestion, {
-      propsData: {
-        inputId: "input ID",
-      },
-    });
-
-    // Assert
-    const input = wrapper.find("select");
-
-    // Expect
-    expect(input.attributes().id).toEqual("input ID");
-  });
-
-  it("Should render the 'questionText' data value as the label text when disableAutoFill is false.", async () => {
-    // Arrange
-    //Mock CMS content
-    const questionText = "Question Text";
-    const cmsContent = {
-      QuestionText: questionText,
-    };
-
-    // Act
-    const wrapper = shallowMount(dropdownQuestion, {
-      global: {
-        directives: {
-          maska: maska,
-        }
-      },
-    });
-    await wrapper.setData({
-      questionText: questionText,
-    });
-    wrapper.vm.initializeComponent(cmsContent);
-
-    // Assert
-    expect(wrapper.find("label").text()).toContain(questionText);
-    wrapper.unmount();
-  });
-  
-  it("Should render the 'questionText' data value with '&NoBreak;' after the first character as the label text when disableAutoFill is true.", async () => {
-    // Arrange
-    //Mock CMS content
-    const originalQuestionText = "Question Text";
-    // Trust me, the below instance of the string "Q⁠uestion Text" actually has the &NoBreak; in it. You just can't see it
-    // Don't believe me? Copy it and paste it into Google. Then inspect the search field element in Dev Tools, 
-    // you will see "Q&uestion Text"
-    const expectedQuestionText = "Q⁠uestion Text"; 
-    const cmsContent = {
-      QuestionText: originalQuestionText,
-    };
-
-    // Act
-    const wrapper = shallowMount(dropdownQuestion, {
-      global: {
-        directives: {
-          maska: maska,
-        }
-      },
-      propsData: {
-        disableAutoFill: true,
-      },
-    });
-    await wrapper.setData({
-      questionText: originalQuestionText,
-    });
-    wrapper.vm.initializeComponent(cmsContent);
-
-    // Assert
-    expect(wrapper.vm.$el.children[0].innerHTML).toBe(expectedQuestionText);
-    wrapper.unmount();
-  });
-
-  it("Should emit new value when modelValue is changed", async () => {
-    // Act
-    const wrapper = shallowMount(dropdownQuestion, {
-      global: {
-        directives: {
-          maska: maska,
-        }
-      },
-      propsData: {
-        modelValue: "val",
-      },
-    });
-
-    await wrapper.find("select").setValue("val2");
-
-    // Assert
-    expect(wrapper.emitted()).toHaveProperty('change')
-
-  });
-});
diff --git a/src/common-components/textbox-question/textbox-question.spec.js1 b/src/common-components/textbox-question/textbox-question.spec.js
similarity index 55%
rename from src/common-components/textbox-question/textbox-question.spec.js1
rename to src/common-components/textbox-question/textbox-question.spec.js
index 63214c126..09f929490 100644
--- a/src/common-components/textbox-question/textbox-question.spec.js1
+++ b/src/common-components/textbox-question/textbox-question.spec.js
@@ -1,139 +1,61 @@
 import { shallowMount } from "@vue/test-utils";
 import textboxQuestion from "./textbox-question";
-import { maska } from 'maska';
+
+// Mock CMS content
+const questionText = "Question Text";
+const mockMixin = {
+  methods: {
+    getCmsContent: jest.fn().mockImplementation(()=> {
+      return questionText;
+    })
+  }
+}
+const maska = jest.fn();
 
 describe("textboxQuestion.vue", () => {
 
-  it("Should return aria-disabled state", async () => {
-    // Act
-    const wrapper = shallowMount(textboxQuestion, {
-      global: {
-        directives: {
-          maska: maska,
-        }
-      },
-      propsData: {
-        isDisabled: true,
-      },
-    });
-
-    // Assert
-    const input = wrapper.find("input");
-
-    // Expect
-    expect(input.attributes()["aria-disabled"]).toEqual("true");
-
-  });
-
   it("Should render a text input", async () => {
-    // Act
+    // Arrange   
     const wrapper = shallowMount(textboxQuestion, {
       global: {
         directives: {
           maska: maska,
         }
       },
-      propsData: {
-        name: "test",
-        label: "unit test label",
-      },
+      mixins: [mockMixin]
     });
 
-    // Assert
+    wrapper.getCmsContent = jest.fn();
+
+    // Act
     const input = wrapper.find("input");
 
+    // Assert
     expect(input.exists()).toBe(true);
 
   });
 
-  it("Should return input id", async () => {
-    // Act
-    const wrapper = shallowMount(textboxQuestion, {
-      global: {
-        directives: {
-          maska: maska,
-        }
-      },
-      propsData: {
-        inputId: "input ID",
-      },
-    });
-
-    // Assert
-    const input = wrapper.find("input");
-
-    // Expect
-    expect(input.attributes().id).toEqual("input ID");
-
-  });
-
-  it("Should render the 'questionText' data value as the aria-label attribute.", async () => {
-    // Arrange
-    //Mock CMS content
-    const questionText = "Question Text";
-    const cmsContent = {
-      QuestionText: questionText,
-    };
-
-    // Act
-    const wrapper = shallowMount(textboxQuestion, {
-      global: {
-        directives: {
-          maska: maska,
-        }
-      },
-    });
-    await wrapper.setData({
-      questionText: questionText,
-    });
-    wrapper.vm.initializeComponent(cmsContent);
-
-    // Assert
-    expect(wrapper.find("label").attributes('aria-label')).toBe(questionText);
-    wrapper.unmount();
-
-  });
-
   it("Should render the 'questionText' data value as the label text when disableAutoFill is false.", async () => {
     // Arrange
-    //Mock CMS content
-    const questionText = "Question Text";
-    const cmsContent = {
-      QuestionText: questionText,
-    };
-
-    // Act
     const wrapper = shallowMount(textboxQuestion, {
       global: {
         directives: {
           maska: maska,
         }
       },
+      mixins: [mockMixin]
     });
-    await wrapper.setData({
-      questionText: questionText,
-    });
-    wrapper.vm.initializeComponent(cmsContent);
-
-    // Assert
-    expect(wrapper.find("label").text()).toContain(questionText);
-    wrapper.unmount();
-
-  });
-  
-  it("Should render the 'questionText' data value with '&NoBreak;' after the first character as the label text when disableAutoFill is true.", async () => {
-    // Arrange
-    //Mock CMS content
-    const originalQuestionText = "Question Text";
-    // Trust me, the below instance of the string "Q⁠uestion Text" actually has the &NoBreak; in it. You just can't see it
-    // Don't believe me? Copy it and paste it into Google. Then inspect the search field element in Dev Tools, 
-    // you will see "Q&uestion Text"
-    const expectedQuestionText = "Q⁠uestion Text"; 
-    const cmsContent = {
-      QuestionText: originalQuestionText,
-    };
 
     // Act
+    const label = wrapper.find("label");
+
+    // Assert
+    expect(label.text()).toContain(questionText);
+
+  }); 
+  
+  it("Should render the 'questionText' data value with '&NoBreak;' after the first character of each word in the label text when disableAutoFill is true.", async () => {
+    // Arrange
     const wrapper = shallowMount(textboxQuestion, {
       global: {
         directives: {
@@ -143,15 +65,84 @@ describe("textboxQuestion.vue", () => {
       propsData: {
         disableAutoFill: true,
       },
+      mixins: [mockMixin]
     });
-    await wrapper.setData({
-      questionText: originalQuestionText,
-    });
-    wrapper.vm.initializeComponent(cmsContent);
+
+    // Mock CMS content ...
+    // Trust me, the below instance of the string "Q⁠uestion Text" actually has the &NoBreak; in it. You just can't see it
+    // Don't believe me? Copy and paste it into Google. Then inspect the search field element in Dev Tools, 
+    // you will see "Q&NoBreak;uestion T&NoBreak;ext"
+    const expectedQuestionText = "Q⁠uestion T⁠ext"; 
+
+    // Act
+    const label = wrapper.find("label");
 
     // Assert
-    expect(wrapper.vm.$el.children[0].innerHTML).toBe(expectedQuestionText);
-    wrapper.unmount();
+    expect(label.text()).toContain(expectedQuestionText);
+
+  });
+  
+  it("Should return input id as the id of the input field", async () => {
+    // Arrange
+    const wrapper = shallowMount(textboxQuestion, {
+      global: {
+        directives: {
+          maska: maska,
+        }
+      },
+      propsData: {
+        inputId: "input ID",
+      },
+      mixins: [mockMixin]
+    });
+
+    // Act
+    const input = wrapper.find("input");
+
+    // Assert
+    expect(input.attributes().id).toEqual("input ID");
+
+  });
+  
+  it("Should render the 'questionText' data value as the aria-label attribute.", async () => {
+
+    // Arrange
+    const wrapper = shallowMount(textboxQuestion, {
+      global: {
+        directives: {
+          maska: maska,
+        }
+      },
+      mixins: [mockMixin]
+    });
+
+    // Act
+    const label = wrapper.find("label");
+
+    // Assert
+    expect(label.attributes("aria-label")).toContain(questionText);
+
+  });
+
+  it("Should return aria-disabled state as disabled", async () => {
+    // Arrange
+    const wrapper = shallowMount(textboxQuestion, {
+      global: {
+        directives: {
+          maska: maska,
+        }
+      },
+      propsData: {
+        isDisabled: true,
+      },
+      mixins: [mockMixin]
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    // Expect
+    expect(input.attributes("aria-disabled")).toEqual("true");
 
   });
 
@@ -166,6 +157,7 @@ describe("textboxQuestion.vue", () => {
       propsData: {
         modelValue: "val",
       },
+      mixins: [mockMixin]
     });
 
     await wrapper.find("input").setValue("val2");
@@ -175,4 +167,33 @@ describe("textboxQuestion.vue", () => {
 
   });
 
+  it("Should call this.handleChange with new value when this.semiAggressiveValidation = true, the value is changed, and the new value is valid", async () => {
+    // Arrange
+    const wrapper = shallowMount(textboxQuestion, {
+      global: {
+        directives: {
+          maska: maska,
+        }
+      },
+      propsData: {
+        options: {},
+        modelValue: "foo",
+        semiAggressiveValidation: true,
+      },
+      mixins: [mockMixin]
+    });
+
+    wrapper.vm.handleChange = jest.fn().mockImplementation(() => {});
+    wrapper.vm.validate = jest.fn().mockImplementation(() => {
+      return true;
+    });
+
+    // Act
+    wrapper.vm.$options.watch.value.call(wrapper.vm, "bar");
+
+    // Assert
+    expect(wrapper.vm.handleChange).toHaveBeenCalled;
+
+  });  
+
 });

From 2be222a959b00fa8acb4a8620eadf582b7a0938f Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 24 May 2022 18:23:13 -0400
Subject: [PATCH 06/32] CSR-544 footer modal hamburger button.

A functional version of the hamburger menu button can be seen at the top of the /fmg/component-test page.

Also in this commit: remove temporary code from router/index.js.
---
 .../loading-modal/loading-modal.vue           | 222 +++++++++---------
 .../menu-button/menu-button.spec.js           |   1 +
 .../menu-button/menu-button.vue               |  53 +++++
 src/layouts/component-test/component-test.vue |  89 +------
 src/router/index.js                           |   6 -
 5 files changed, 177 insertions(+), 194 deletions(-)
 create mode 100644 src/common-components/menu-button/menu-button.spec.js
 create mode 100644 src/common-components/menu-button/menu-button.vue

diff --git a/src/common-components/loading-modal/loading-modal.vue b/src/common-components/loading-modal/loading-modal.vue
index a718095f6..8c7836dcd 100644
--- a/src/common-components/loading-modal/loading-modal.vue
+++ b/src/common-components/loading-modal/loading-modal.vue
@@ -103,135 +103,135 @@ export default {
   }
 
   .text-container {
-  display: flex;
-  width: 350px;
-  overflow: hidden;
-  white-space: nowrap;
-  margin: 0 auto;
-  position: relative;
-  &:after {
-    content: '';
-    background: rgb(245,245,245);
-    background: linear-gradient(270deg, rgba(245,245,245,1) 0%, rgba(245,245,245,0) 5%, rgba(245,245,245,0) 95%, rgba(245,245,245,1) 100%);
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    z-index: 2;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-  }
+    display: flex;
+    width: 350px;
+    overflow: hidden;
+    white-space: nowrap;
+    margin: 0 auto;
+    position: relative;
+    &:after {
+      content: '';
+      background: rgb(245,245,245);
+      background: linear-gradient(270deg, rgba(245,245,245,1) 0%, rgba(245,245,245,0) 5%, rgba(245,245,245,0) 95%, rgba(245,245,245,1) 100%);
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      z-index: 2;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
 
-  &.slide p {
-    animation: slide-in 20s ease-in-out 1s forwards 1;
-  }
+    &.slide p {
+      animation: slide-in 20s ease-in-out 1s forwards 1;
+    }
 
 
-  p {
-    margin: 0 175px;
-    transform: translateX(-2346px);
-  }
+    p {
+      margin: 0 175px;
+      transform: translateX(-2346px);
+    }
 
-  @keyframes slide-in {
-    0% {
-      transform: translateX(-2346px)
-    }
-    11% {
-      transform: translateX(-2010px)
-    }
-    22% {
-      transform: translateX(-2010px)
-    }
-    33% {
-      transform: translateX(-1490px)
-    }
-    44% {
-      transform: translateX(-1490px)
-    }
-    55% {
-      transform: translateX(-985px)
-    }
-    66% {
-      transform: translateX(-985px)
-    }
-    77% {
-      transform: translateX(-490px)
-    }
-    88% {
-      transform: translateX(-490px)
-    }
-    100% {
-      transform: translateX(-40px)
-    }
-  }
-
-
-  .dot-1 {
-    animation: blinking-elipsis .75s linear infinite;
-    @keyframes blinking-elipsis {
+    @keyframes slide-in {
       0% {
-        opacity: 1;
+        transform: translateX(-2346px)
       }
-      65% {
-        opacity: 1;
-      }
-      66% {
-        opacity: 0;
-      }
-      100% {
-        opacity: 0;
-      }
-    }
-  }
-
-  .dot-2 {
-    animation: blinking-elipsis-2 .75s linear infinite;
-    @keyframes blinking-elipsis-2 {
-      0% {
-        opacity: 0;
-      }
-      21% {
-        opacity: 0;
+      11% {
+        transform: translateX(-2010px)
       }
       22% {
-        opacity: 1;
+        transform: translateX(-2010px)
       }
-      65% {
-        opacity: 1;
-      }
-      66% {
-        opacity: 0;
-      }
-      100% {
-        opacity: 0;
-      }
-    }
-  }
-
-  .dot-3 {
-    animation: blinking-elipsis-3 .75s linear infinite;
-    @keyframes blinking-elipsis-3 {
-      0% {
-        opacity: 0;
-      }
-      43% {
-        opacity: 0;
+      33% {
+        transform: translateX(-1490px)
       }
       44% {
-        opacity: 1;
+        transform: translateX(-1490px)
       }
-      65% {
-        opacity: 1;
+      55% {
+        transform: translateX(-985px)
       }
       66% {
-        opacity: 0;
+        transform: translateX(-985px)
+      }
+      77% {
+        transform: translateX(-490px)
+      }
+      88% {
+        transform: translateX(-490px)
       }
       100% {
-        opacity: 0;
+        transform: translateX(-40px)
+      }
+    }
+
+
+    .dot-1 {
+      animation: blinking-elipsis .75s linear infinite;
+      @keyframes blinking-elipsis {
+        0% {
+          opacity: 1;
+        }
+        65% {
+          opacity: 1;
+        }
+        66% {
+          opacity: 0;
+        }
+        100% {
+          opacity: 0;
+        }
+      }
+    }
+
+    .dot-2 {
+      animation: blinking-elipsis-2 .75s linear infinite;
+      @keyframes blinking-elipsis-2 {
+        0% {
+          opacity: 0;
+        }
+        21% {
+          opacity: 0;
+        }
+        22% {
+          opacity: 1;
+        }
+        65% {
+          opacity: 1;
+        }
+        66% {
+          opacity: 0;
+        }
+        100% {
+          opacity: 0;
+        }
+      }
+    }
+
+    .dot-3 {
+      animation: blinking-elipsis-3 .75s linear infinite;
+      @keyframes blinking-elipsis-3 {
+        0% {
+          opacity: 0;
+        }
+        43% {
+          opacity: 0;
+        }
+        44% {
+          opacity: 1;
+        }
+        65% {
+          opacity: 1;
+        }
+        66% {
+          opacity: 0;
+        }
+        100% {
+          opacity: 0;
+        }
       }
     }
   }
 }
-}
 </style>
diff --git a/src/common-components/menu-button/menu-button.spec.js b/src/common-components/menu-button/menu-button.spec.js
new file mode 100644
index 000000000..3d0843e10
--- /dev/null
+++ b/src/common-components/menu-button/menu-button.spec.js
@@ -0,0 +1 @@
+test.todo("some test to be written in the future");
diff --git a/src/common-components/menu-button/menu-button.vue b/src/common-components/menu-button/menu-button.vue
new file mode 100644
index 000000000..c7b798f9a
--- /dev/null
+++ b/src/common-components/menu-button/menu-button.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="menu-button" :class="[isActive ? 'active' : '']" @click="toggleClass()">
+    <div class="bar1"></div>
+    <div class="bar2"></div>
+    <div class="bar3"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'menuButton',
+  data() {
+    return {
+      isActive: false,
+    };
+  },
+  methods: {
+    toggleClass: function(event){
+      this.isActive = !this.isActive;
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.menu-button {
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 50%;
+  box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.2);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  .bar1,
+  .bar2,
+  .bar3 {
+    width: 14px;
+    height: 2px;
+    background-color: $blue-400;
+    margin: 1px 0;
+    transition: 0.25s;
+  }
+  &.active .bar1 {
+    transform: rotate(-45deg) translate(-3px, 3px);
+  }
+  &.active .bar2 {opacity: 0;}
+  &.active .bar3 {
+    transform: rotate(45deg) translate(-3px, -3px);
+  }
+}
+</style>
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 526b1e971..268351417 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -1,5 +1,15 @@
   <template>
     <div class="container-fluid container-shadow p-2 rounded-3">
+      <div class="row my-4">
+        <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Hamburger Menu Button</h4>
+        </div>
+      </div>
+      <div class="row my-2">
+        <div class="col">
+          <menuButton/>
+        </div>
+      </div>
       <div class="row my-4">
         <div class="col">
           <h4 class="m-0 p-2 bg-light rounded">VIN Information</h4>
@@ -1064,81 +1074,6 @@
       <h6>h6 Heading</h6>
     </div>
   </div>
-  <div class="row my-4">
-    <div class="col">
-      <h4 class="m-0 p-2 bg-light rounded">Alerts</h4>
-    </div>
-  </div>
-  <div class="row my-2">
-    <div class="col">
-      <alert
-      alertClass="alert-success"
-      alertHeadline="Dismissible Alert"
-      alertCopy="This is an example of a DISMISSIBLE alert. It will fade away and content around it will shift when dismissed."
-      v-bind:isDismissible="true"
-      />
-    </div>
-  </div>
-  <div class="row my-2">
-    <div class="col">
-      <alert
-      alertClass="alert-danger"
-      alertHeadline="NON-Dismissible Alert"
-      alertCopy="This is an example of a NON-DISMISSIBLE alert."
-      v-bind:isDismissible="false"
-      />
-    </div>
-  </div>
-  <div class="row my-2">
-    <div class="col">
-      <alert
-      alertClass="alert-warning"
-      alertHeadline="Warning Alert"
-      alertCopy="This is an example of a WARNING alert."
-      v-bind:isDismissible="false"
-      />
-    </div>
-  </div>
-  <div class="row my-2">
-    <div class="col">
-      <alert
-      alertClass="alert-info"
-      alertHeadline="Info Alert"
-      alertCopy="This is an example of a INFO alert."
-      v-bind:isDismissible="false"
-      />
-    </div>
-  </div>
-  <div class="row my-2">
-    <div class="col">
-      <alert
-      alertClass="alert-danger"
-      alertHeadline="Danger Alert"
-      alertCopy="This is an example of a DANGER alert."
-      v-bind:isDismissible="false"
-      />
-    </div>
-  </div>
-  <div class="row my-2">
-    <div class="col">
-      <alert
-      alertClass="alert-success"
-      alertHeadline="No Body Copy Alert"
-      alertCopy=""
-      v-bind:isDismissible="false"
-      />
-    </div>
-  </div>
-  <div class="row my-2">
-    <div class="col">
-      <alert
-      alertClass="alert-success"
-      alertHeadline="Multi-Paragraph Alert"
-      :alertCopy="['This is an example of a MULTI-PARAGRAPH alert, which takes an array of strings instead of a single string value for alertCopy.', 'This is the second item in the array of strings.']"
-      v-bind:isDismissible="false"
-      />
-    </div>
-  </div>
   </div>
   </template>
 
@@ -1147,7 +1082,6 @@
   import buttonBack from "@/common-components/funnel-sub-header/button-back/button-back";
   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 listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
   import checkbox from "@/ux-components/checkbox/checkbox";
   import radio from "@/ux-components/radio/radio";
@@ -1155,6 +1089,7 @@
   import textboxQuestion from "@/common-components/textbox-question/textbox-question";
   import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question";
   import vinInformation from "@/layouts/vin-lookup/vin-information/vin-information";
+  import menuButton from "@/common-components/menu-button/menu-button";
   export default {
     name: "App",
     components: {
@@ -1162,7 +1097,6 @@
       buttonBack,
       listCard,
       listButton,
-      alert,
       listButtonHorizontal,
       checkbox,
       radio,
@@ -1170,6 +1104,7 @@
       textboxQuestion,
       dropdownQuestion,
       vinInformation,
+      menuButton,
     },
     data() {
       return {
diff --git a/src/router/index.js b/src/router/index.js
index c8d614d48..db46a3306 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -21,7 +21,6 @@ import analyticsMixin from "@/mixins/analytics-mixin";
 // Components
 import ComponentTest from "@/layouts/component-test/component-test.vue";
 import FormTest from "@/layouts/form-test/form-test.vue";
-import Modal from "@/common-components/loading-modal/loading-modal.vue";
 
 
 const routes = [
@@ -35,11 +34,6 @@ const routes = [
     name: "FormTest",
     component: FormTest,
   },
-  {
-    path: "/loading-modal", // This is a temporary route for testing.
-    name: "Modal",
-    component: Modal,
-  },
   {
     path: "/",
     name: "root",

From e1f6a4c419af4c2a0fb9148cdf52255bb2efdd6f Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 24 May 2022 18:24:54 -0400
Subject: [PATCH 07/32] Format code.

---
 src/common-components/loading-modal/loading-modal.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/common-components/loading-modal/loading-modal.vue b/src/common-components/loading-modal/loading-modal.vue
index 8c7836dcd..a3cbfa280 100644
--- a/src/common-components/loading-modal/loading-modal.vue
+++ b/src/common-components/loading-modal/loading-modal.vue
@@ -166,7 +166,6 @@ export default {
       }
     }
 
-
     .dot-1 {
       animation: blinking-elipsis .75s linear infinite;
       @keyframes blinking-elipsis {

From d4530b9091527820abd5c2430721febafbab0b03 Mon Sep 17 00:00:00 2001
From: Katie <katie.oh@safelite.com>
Date: Wed, 25 May 2022 15:30:21 -0400
Subject: [PATCH 08/32] CSR-416 Restructure license-plate-lookup.spec.js

---
 .../license-plate-lookup.spec.js              | 651 +++++++++---------
 1 file changed, 311 insertions(+), 340 deletions(-)

diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.spec.js b/src/layouts/license-plate-lookup/license-plate-lookup.spec.js
index 281947ae4..99f1f86c8 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.spec.js
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.spec.js
@@ -30,8 +30,8 @@ jest.mock("@/store", () => ({
   dispatch: jest.fn(),
   getters: {
     order: {
-      customer: { emailAddress: "test@test.com"},
-      serviceLocation: {zip: "11111"},
+      customer: { emailAddress: "test@test.com" },
+      serviceLocation: { zip: "11111" },
     },
     vehicle: {
       carId: "TESTID",
@@ -48,382 +48,353 @@ jest.mock("@/store", () => ({
 }));
 
 describe("license-plate-lookup.vue", () => {
-  test("CarId set, arePagePrerequisitesValid should be true ", async () => {
-    //Arrange
-    const { wrapper } = setupMocks({});
+  describe("get values from store", () => {
+    test("getLicensePlateFromStore returns store license plate", async () => {
+      // Arrange
+      const { wrapper } = setupMocks({});
 
-    //Act
-    licensePlateLookup.beforeRouteEnter.call(
-      wrapper.vm,
-      { query: { fmgPage: "license-plate-lookup" } },
-      undefined,
-      (c) => c(wrapper.vm)
-    );
+      // ACT
+      const licensePlate = wrapper.vm.getLicensePlateFromStore();
 
-    let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
-    await nextTick();
+      // Assert
+      expect(licensePlate).toEqual("TESTPLATE");
+    });
 
-    //Assert
-    expect(arePagePrerequisitesValid).toBe(true);
+    test("getRegistrationZipFromStore returns store registration zip", async () => {
+      // Arrange
+      const { wrapper } = setupMocks({});
+
+      // ACT
+      const registrationZip = wrapper.vm.getRegistrationZipFromStore();
+
+      // Assert
+      expect(registrationZip).toEqual("12345");
+    });
+
+    test("getEmailFromStore returns store customer email", async () => {
+      // Arrange
+      const { wrapper } = setupMocks({});
+
+      // ACT
+      const customerEmail = wrapper.vm.getEmailFromStore();
+
+      // Assert
+      expect(customerEmail).toEqual("test@test.com");
+    });
+
+    test("getServiceZipFromStore returns store service zip", async () => {
+      // Arrange
+      const { wrapper } = setupMocks({});
+
+      // ACT
+      const serviceZip = wrapper.vm.getServiceZipFromStore();
+
+      // Assert
+      expect(serviceZip).toEqual("11111");
+    });
   });
-});
 
-describe("license-plate-lookup.vue", () => {
-  test("BackButtonAction triggers a router.navigate change", async () => {
+  describe("navigation", () => {
+    test("BackButtonAction triggers a router.navigate change", async () => {
 
-    //Arrange
-    const { wrapper } = setupMocks({});
+      //Arrange
+      const { wrapper } = setupMocks({});
+  
+      //Act
+      licensePlateLookup.beforeRouteEnter.call(
+        wrapper.vm,
+        { query: { fmgPage: "license-plate-lookup" } },
+        undefined,
+        (c) => c(wrapper.vm)
+      );
+  
+      wrapper.vm.backButtonAction();
+  
+      //Assert
+      expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+    });
 
-    //Act
-    licensePlateLookup.beforeRouteEnter.call(
-      wrapper.vm,
-      { query: { fmgPage: "license-plate-lookup" } },
-      undefined,
-      (c) => c(wrapper.vm)
-    );
+    describe("on forwardButtonAction click", () => {
+      test("Navigate forward should be called and isCarId should be set to false when data entered matches store data on forwardButtonAction click", async () => {
 
-    wrapper.vm.backButtonAction();
-
-    //Assert
-    expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
-  });
-});
-
-describe("license-plate-lookup.vue", () => {
-  test("getLicensePlateFromStore returns store license plate", async () => {
+        // Arrange
+        const { wrapper } = setupMocks({});
     
-    // Arrange
-    const { wrapper } = setupMocks({});
-
-    // ACT
-    const licensePlate = wrapper.vm.getLicensePlateFromStore();
-
-    // Assert
-    expect(licensePlate).toEqual("TESTPLATE");
-  });
-});
-
-describe("license-plate-lookup.vue", () => {
-  test("getRegistrationZipFromStore returns store registration zip", async () => {
+        wrapper.vm.validateZip = jest.fn().mockImplementation(() => {
+          return { data: { isServiceable: true } };
+        });
+        wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {
+          return '';
+        });
+        const vinLookup = { data: { vehicle: { carId: "TESTID" } } }
+        wrapper.vm.lookupVin = jest.fn().mockImplementation(() => {
+          return { catch: () => vinLookup };
+        });
+        wrapper.vm.navigateForward = jest.fn();
     
-    // Arrange
-    const { wrapper } = setupMocks({});
-
-    // ACT
-    const registrationZip = wrapper.vm.getRegistrationZipFromStore();
-
-    // Assert
-    expect(registrationZip).toEqual("12345");
-  });
-});
-
-describe("license-plate-lookup.vue", () => {
-  test("getEmailFromStore returns store customer email", async () => {
+        //Act
+        licensePlateLookup.beforeRouteEnter.call(
+          wrapper.vm,
+          { query: { fmgPage: "license-plate-lookup" } },
+          undefined,
+          (c) => c(wrapper.vm)
+        );
     
-    // Arrange
-    const { wrapper } = setupMocks({});
-
-    // ACT
-    const customerEmail = wrapper.vm.getEmailFromStore();
-
-    // Assert
-    expect(customerEmail).toEqual("test@test.com");
-  });
-});
-
-describe("license-plate-lookup.vue", () => {
-  test("getServiceZipFromStore returns store service zip", async () => {
+        await wrapper.vm.forwardButtonAction();
     
-    // Arrange
-    const { wrapper } = setupMocks({});
+        //Assert
+        expect(wrapper.vm.navigateForward).toHaveBeenCalled();
+        expect(wrapper.vm.isCarIdDifferent).toEqual(false);
+      });
 
-    // ACT
-    const serviceZip = wrapper.vm.getServiceZipFromStore();
+      test("Function should stop and datam isRegistrationZipServicable should be set to false when service zip entered returns false on forwardButtonAction click", async () => {
+        // Arrange
+        const { wrapper } = setupMocks({});
+    
+        wrapper.vm.validateZip = jest.fn().mockImplementation(() => {
+          return { data: { isServiceable: false } };
+        });
+        wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {
+          return '';
+        });
+        wrapper.vm.$refs.funnelFooter.removeLoader = jest.fn();
 
-    // Assert
-    expect(serviceZip).toEqual("11111");
-  });
-});
+        //Act
+        licensePlateLookup.beforeRouteEnter.call(
+          wrapper.vm,
+          { query: { fmgPage: "license-plate-lookup" } },
+          undefined,
+          (c) => c(wrapper.vm)
+        );
+    
+        await wrapper.vm.forwardButtonAction();
+    
+        //Assert
+        expect(wrapper.vm.isRegistrationZipServicable).toEqual(false);
+      });
 
-describe("license-plate-lookup.vue", () => {
-  test("Navigate forward should be called and isCarId should be set to false when data entered matches store data on forwardButtonAction click", async () => {
+      test("Function should stop and datam isCarIdDifferent should be set to true when carId entered doesn't match store carId or previously entered carId on forwardButtonAction click", async () => {
+        // Arrange
+        const { wrapper } = setupMocks({});
+    
+        wrapper.vm.validateZip = jest.fn().mockImplementation(() => {
+          return { data: { isServiceable: true } };
+        });
+        wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {
+          return '';
+        });
+        const vinLookup = { data: { vehicle: { carId: "TESTID1" } } }
+        wrapper.vm.lookupVin = jest.fn().mockImplementation(() => {
+          return { catch: () => vinLookup };
+        });
+        wrapper.vm.$refs.funnelFooter.removeLoader = jest.fn();
+        wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
+    
+        //Act
+        licensePlateLookup.beforeRouteEnter.call(
+          wrapper.vm,
+          { query: { fmgPage: "license-plate-lookup" } },
+          undefined,
+          (c) => c(wrapper.vm)
+        );
+    
+        await wrapper.vm.forwardButtonAction();
+    
+        //Assert
+        expect(wrapper.vm.isCarIdDifferent).toEqual(true);
+      });
 
-    // Arrange
-    const { wrapper } = setupMocks({});
+      test("Navigate forward should be called and isCarId should be set to true when carId entered matches previously entered carId and rest of data entered matches store data on forwardButtonAction click", async () => {
 
-    wrapper.vm.validateZip = jest.fn().mockImplementation(() => {
-      return {data: {isServiceable: true}};
+        // Arrange
+        const { wrapper } = setupMocks({});
+    
+        wrapper.vm.validateZip = jest.fn().mockImplementation(() => {
+          return { data: { isServiceable: true } };
+        });
+        wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {
+          return '';
+        });
+        const vinLookup = { data: { vehicle: { carId: "TESTID1" } } }
+        wrapper.vm.lookupVin = jest.fn().mockImplementation(() => {
+          return { catch: () => vinLookup };
+        });
+        wrapper.vm.previouslyEnteredCarId = "TESTID1";
+        wrapper.vm.navigateForward = jest.fn();
+    
+        //Act
+        licensePlateLookup.beforeRouteEnter.call(
+          wrapper.vm,
+          { query: { fmgPage: "license-plate-lookup" } },
+          undefined,
+          (c) => c(wrapper.vm)
+        );
+    
+        await wrapper.vm.forwardButtonAction();
+    
+        //Assert
+        expect(wrapper.vm.navigateForward).toHaveBeenCalled();
+        expect(wrapper.vm.isCarIdDifferent).toEqual(true);
+      });
     });
-    wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {
-      return '';
-   });
-    const vinLookup = {data: {vehicle: {carId: "TESTID"}}}
-    wrapper.vm.lookupVin = jest.fn().mockImplementation(() => {
-      return {catch: () => vinLookup};
+
+    describe("navigateForward", () => {
+      test("NavigateAfterSave should be called if isCarIdDifferent is true and isSelectedGlassAvailableForVehicle is false when navigateForward is called", async () => {
+
+        // Arrange
+        const { wrapper } = setupMocks({});
+    
+        //Act
+        wrapper.vm.isCarIdDifferent = true;
+        wrapper.vm.isSelectedGlassAvailableForVehicle = false;
+        wrapper.vm.$router.navigateAfterSave = jest.fn();
+        wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {
+          return '';
+        });
+        store.dispatch = jest.fn();
+    
+        await wrapper.vm.navigateForward();
+    
+        //Assert
+        expect(wrapper.vm.$router.navigateAfterSave).toHaveBeenCalled();
+      });
+
+      test("navigateAfterSaveToHeritageFunnel should be called if isCarIdDifferent is false or isSelectedGlassAvailableForVehicle is true when navigateForward is called", async () => {
+
+        // Arrange
+        const { wrapper } = setupMocks({});
+    
+        //Act
+        wrapper.vm.isCarIdDifferent = false;
+        wrapper.vm.$refs.loadingModal.showModal = jest.fn();
+        wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {
+          return '';
+        });
+        navigateToHeritage.navigateAfterSaveToHeritageFunnel = jest.fn();
+        await wrapper.vm.navigateForward();
+    
+        //Assert
+        expect(navigateToHeritage.navigateAfterSaveToHeritageFunnel).toHaveBeenCalled();
+      });
     });
-    wrapper.vm.navigateForward = jest.fn();
-
-    //Act
-    licensePlateLookup.beforeRouteEnter.call(
-      wrapper.vm,
-      { query: { fmgPage: "license-plate-lookup" } },
-      undefined,
-      (c) => c(wrapper.vm)
-    );
-      
-    await wrapper.vm.forwardButtonAction();
-
-    //Assert
-    expect(wrapper.vm.navigateForward).toHaveBeenCalled();
-    expect(wrapper.vm.isCarIdDifferent).toEqual(false);
   });
-});
 
-describe("license-plate-lookup.vue", () => {
-  test("Function should stop and datam isRegistrationZipServicable should be set to false when service zip entered returns false on forwardButtonAction click", async () => {
+  describe("button text", () => {
+    test("Button Text should revert to initial value when licensePlate textfield has new text", async () => {
 
-    // Arrange
-    const { wrapper } = setupMocks({});
-
-    wrapper.vm.validateZip = jest.fn().mockImplementation(() => {
-      return {data: {isServiceable: false}};
+      // Arrange
+      const { wrapper } = setupMocks({});
+  
+      //Act
+      wrapper.vm.licensePlate = "NEWPLATE";
+      wrapper.vm.getCmsContent = jest.fn();
+      wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
+      await wrapper.vm.$nextTick();
+  
+      //Assert
+      expect(wrapper.vm.$refs.funnelFooter.updateButtonText).toHaveBeenCalled();
     });
-    wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {
-      return '';
-   });
-    wrapper.vm.$refs.funnelFooter.removeLoader = jest.fn();
-    //Act
-    licensePlateLookup.beforeRouteEnter.call(
-      wrapper.vm,
-      { query: { fmgPage: "license-plate-lookup" } },
-      undefined,
-      (c) => c(wrapper.vm)
-    );
-      
-    await wrapper.vm.forwardButtonAction();
 
-    //Assert
-    expect(wrapper.vm.isRegistrationZipServicable).toEqual(false);
-  });
-});
+    test("Button Text should revert to initial value when registrationZip textfield has new text", async () => {
 
-describe("license-plate-lookup.vue", () => {
-  test("Function should stop and datam isCarIdDifferent should be set to true when carId entered doesn't match store carId or previously entered carId on forwardButtonAction click", async () => {
-
-    // Arrange
-    const { wrapper } = setupMocks({});
-
-    wrapper.vm.validateZip = jest.fn().mockImplementation(() => {
-      return {data: {isServiceable: true}};
+      // Arrange
+      const { wrapper } = setupMocks({});
+  
+      //Act
+      wrapper.vm.registrationZip = "55555";
+      wrapper.vm.getCmsContent = jest.fn();
+      wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
+      await wrapper.vm.$nextTick();
+  
+      //Assert
+      expect(wrapper.vm.$refs.funnelFooter.updateButtonText).toHaveBeenCalled();
     });
-    wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {
-      return '';
-   });
-    const vinLookup = {data: {vehicle: {carId: "TESTID1"}}}
-    wrapper.vm.lookupVin = jest.fn().mockImplementation(() => {
-      return {catch: () => vinLookup};
+
+    test("Button Text should revert to initial value when serviceZip textfield has new text", async () => {
+
+      // Arrange
+      const { wrapper } = setupMocks({});
+  
+      //Act
+      wrapper.vm.serviceZip = "55555";
+      wrapper.vm.getCmsContent = jest.fn();
+      wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
+      await wrapper.vm.$nextTick();
+  
+      //Assert
+      expect(wrapper.vm.$refs.funnelFooter.updateButtonText).toHaveBeenCalled();
     });
-    wrapper.vm.$refs.funnelFooter.removeLoader = jest.fn();
-    wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
+  })
 
-    //Act
-    licensePlateLookup.beforeRouteEnter.call(
-      wrapper.vm,
-      { query: { fmgPage: "license-plate-lookup" } },
-      undefined,
-      (c) => c(wrapper.vm)
-    );
-      
-    await wrapper.vm.forwardButtonAction();
-
-    //Assert
-    expect(wrapper.vm.isCarIdDifferent).toEqual(true);
-  });
-});
-
-describe("license-plate-lookup.vue", () => {
-  test("Navigate forward should be called and isCarId should be set to true when carId entered matches previously entered carId and rest of data entered matches store data on forwardButtonAction click", async () => {
-
-    // Arrange
-    const { wrapper } = setupMocks({});
-
-    wrapper.vm.validateZip = jest.fn().mockImplementation(() => {
-      return {data: {isServiceable: true}};
+  describe("miscellaneous", () => {
+    test("CarId set, arePagePrerequisitesValid should be true ", async () => {
+      //Arrange
+      const { wrapper } = setupMocks({});
+    
+      //Act
+      licensePlateLookup.beforeRouteEnter.call(
+        wrapper.vm,
+        { query: { fmgPage: "license-plate-lookup" } },
+        undefined,
+        (c) => c(wrapper.vm)
+      );
+    
+      let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
+      await nextTick();
+    
+      //Assert
+      expect(arePagePrerequisitesValid).toBe(true);
     });
-    wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {
-      return '';
-   });
-    const vinLookup = {data: {vehicle: {carId: "TESTID1"}}}
-    wrapper.vm.lookupVin = jest.fn().mockImplementation(() => {
-      return {catch: () => vinLookup};
+
+    test("Dispatch reset damage and dependencies should be called if isCarIdDifferent is true and isSelectedGlassAvailableForVehicle is false when updateCustomerInfo is called", async () => {
+
+      // Arrange
+      const { wrapper } = setupMocks({});
+  
+      //Act
+      wrapper.vm.isCarIdDifferent = true;
+      wrapper.vm.isSelectedGlassAvailableForVehicle = false;
+      wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {
+        return '';
+      });
+      store.commit = jest.fn();
+      store.dispatch = jest.fn();
+  
+      const vehicleInfo = { year: "2020", make: "honda", model: "civic", style: "2 door", carId: "TestId", category: "testCat", imageUrl: "image.jpg", imageVifNumber: "123", imageColor: "blue" }
+      await wrapper.vm.updateCustomerInfo('vin', vehicleInfo, 'registrationState');
+  
+      //Assert
+      expect(store.dispatch).toHaveBeenCalled();
     });
-    wrapper.vm.previouslyEnteredCarId = "TESTID1";
-    wrapper.vm.navigateForward = jest.fn();
 
-    //Act
-    licensePlateLookup.beforeRouteEnter.call(
-      wrapper.vm,
-      { query: { fmgPage: "license-plate-lookup" } },
-      undefined,
-      (c) => c(wrapper.vm)
-    );
-      
-    await wrapper.vm.forwardButtonAction();
+    test("dispatch non blocking store action called on validate zip", async () => {
 
-    //Assert
-    expect(wrapper.vm.navigateForward).toHaveBeenCalled();
-    expect(wrapper.vm.isCarIdDifferent).toEqual(true);
-  });
-});
-
-describe("license-plate-lookup.vue", () => {
-  test("Button Text should revert to initial value when licensePlate textfield has new text", async () => {
-
-    // Arrange
-    const { wrapper } = setupMocks({});
-
-    //Act
-    wrapper.vm.licensePlate = "NEWPLATE";
-    wrapper.vm.getCmsContent = jest.fn();
-    wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
-    await wrapper.vm.$nextTick();
-
-    //Assert
-    expect(wrapper.vm.$refs.funnelFooter.updateButtonText).toHaveBeenCalled();
-  });
-});
-
-describe("license-plate-lookup.vue", () => {
-  test("Button Text should revert to initial value when registrationZip textfield has new text", async () => {
-
-    // Arrange
-    const { wrapper } = setupMocks({});
-
-    //Act
-    wrapper.vm.registrationZip = "55555";
-    wrapper.vm.getCmsContent = jest.fn();
-    wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
-    await wrapper.vm.$nextTick();
-
-    //Assert
-    expect(wrapper.vm.$refs.funnelFooter.updateButtonText).toHaveBeenCalled();
-  });
-});
-
-describe("license-plate-lookup.vue", () => {
-  test("Button Text should revert to initial value when serviceZip textfield has new text", async () => {
-
-    // Arrange
-    const { wrapper } = setupMocks({});
-
-    //Act
-    wrapper.vm.serviceZip = "55555";
-    wrapper.vm.getCmsContent = jest.fn();
-    wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
-    await wrapper.vm.$nextTick();
-
-    //Assert
-    expect(wrapper.vm.$refs.funnelFooter.updateButtonText).toHaveBeenCalled();
-  });
-});
-
-describe("license-plate-lookup.vue", () => {
-  test("Dispatch reset damage and dependencies should be called if isCarIdDifferent is true and isSelectedGlassAvailableForVehicle is false when updateCustomerInfo is called", async () => {
-
-    // Arrange
-    const { wrapper } = setupMocks({});
-
-    //Act
-    wrapper.vm.isCarIdDifferent = true;
-    wrapper.vm.isSelectedGlassAvailableForVehicle = false;
-    wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {
-       return '';
+      // Arrange
+      const { wrapper } = setupMocks({});
+  
+      //Act
+      await wrapper.vm.validateZip("12345");
+  
+  
+      //Assert
+      expect(baseMixin.methods.dispatchStoreAction).toHaveBeenCalled();
     });
-    store.commit = jest.fn();
-    store.dispatch = jest.fn();
 
-    const vehicleInfo = {year: "2020", make: "honda", model: "civic", style: "2 door", carId: "TestId", category: "testCat", imageUrl: "image.jpg", imageVifNumber: "123", imageColor: "blue"}
-    await wrapper.vm.updateCustomerInfo('vin', vehicleInfo, 'registrationState');
+    test("dispatch non blocking store action called on lookup vin", async () => {
 
-    //Assert
-    expect(store.dispatch).toHaveBeenCalled();
-  });
-});
-
-describe("license-plate-lookup.vue", () => {
-  test("NavigateAfterSave should be called if isCarIdDifferent is true and isSelectedGlassAvailableForVehicle is false when navigateForward is called", async () => {
-
-    // Arrange
-    const { wrapper } = setupMocks({});
-
-    //Act
-    wrapper.vm.isCarIdDifferent = true;
-    wrapper.vm.isSelectedGlassAvailableForVehicle = false;
-    wrapper.vm.$router.navigateAfterSave = jest.fn();
-    wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {
-      return '';
+      // Arrange
+      const { wrapper } = setupMocks({});
+  
+      //Act
+      await wrapper.vm.lookupVin("zzz123fqsfwg");
+  
+  
+      //Assert
+      expect(baseMixin.methods.dispatchStoreAction).toHaveBeenCalled();
     });
-    store.dispatch = jest.fn();
-
-    await wrapper.vm.navigateForward();
-
-    //Assert
-    expect(wrapper.vm.$router.navigateAfterSave).toHaveBeenCalled();
-  });
+  })
 });
 
-describe("license-plate-lookup.vue", () => {
-  test("navigateAfterSaveToHeritageFunnel should be called if isCarIdDifferent is false or isSelectedGlassAvailableForVehicle is true when navigateForward is called", async () => {
-
-    // Arrange
-    const { wrapper } = setupMocks({});
-
-    //Act
-    wrapper.vm.isCarIdDifferent = false;
-    wrapper.vm.$refs.loadingModal.showModal = jest.fn();
-    wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {
-      return '';
-    });
-    navigateToHeritage.navigateAfterSaveToHeritageFunnel = jest.fn();
-    await wrapper.vm.navigateForward();
-
-    //Assert
-    expect(navigateToHeritage.navigateAfterSaveToHeritageFunnel).toHaveBeenCalled();
-  });
-});
-
-describe("license-plate-lookup.vue", () => {
-  test("dispatch non blocking store action called on validate zip", async () => {
-
-    // Arrange
-    const { wrapper } = setupMocks({});
-
-    //Act
-    await wrapper.vm.validateZip("12345");
-
-
-    //Assert
-    expect(baseMixin.methods.dispatchStoreAction).toHaveBeenCalled();
-  });
-});
-
-describe("license-plate-lookup.vue", () => {
-  test("dispatch non blocking store action called on lookup vin", async () => {
-
-    // Arrange
-    const { wrapper } = setupMocks({});
-
-    //Act
-    await wrapper.vm.lookupVin("zzz123fqsfwg");
-
-
-    //Assert
-    expect(baseMixin.methods.dispatchStoreAction).toHaveBeenCalled();
-  });
-});
-
-
-
 function setupMocks({
   pageHeaderWidgetHeaderText = {},
   mountOptionsMockData = {

From c648512029776f8be613e7cf89b8e88343b04d4e Mon Sep 17 00:00:00 2001
From: Katie <katie.oh@safelite.com>
Date: Wed, 25 May 2022 16:16:02 -0400
Subject: [PATCH 09/32] CSR-416 Restructure vehicle-damage.spec.js and add
 claim registration/back button

---
 .../vehicle-damage/vehicle-damage.spec.js     | 1215 ++++++++---------
 src/layouts/vehicle-damage/vehicle-damage.vue |    2 +-
 2 files changed, 603 insertions(+), 614 deletions(-)

diff --git a/src/layouts/vehicle-damage/vehicle-damage.spec.js b/src/layouts/vehicle-damage/vehicle-damage.spec.js
index 0ce0fe085..0df5e2c28 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.spec.js
+++ b/src/layouts/vehicle-damage/vehicle-damage.spec.js
@@ -51,650 +51,639 @@ jest.mock("@/store", () => ({
     },
     eventBusItem: jest.fn(),
     damage: {
-      glassToReplace: [] 
+      glassToReplace: []
     },
   },
 }));
 
 describe("vehicle-damage.vue", () => {
-  test("CarId set, arePagePrerequisitesValid should be true ", async () => {
-    //Arrange
-    const { wrapper } = setupMocks({});
+  describe("navigation", () => {
+    test("BackButtonAction triggers a router.navigate change", async () => {
 
-    //Act
-    vehicleDamage.beforeRouteEnter.call(
-      wrapper.vm,
-      { query: { fmgPage: "vehicle-damage" } },
-      undefined,
-      (c) => c(wrapper.vm)
-    );
+      //Arrange
+      const { wrapper } = setupMocks({});
 
-    let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
-    await nextTick();
+      //Act
+      vehicleDamage.beforeRouteEnter.call(
+        wrapper.vm,
+        { query: { fmgPage: "vehicle-damage" } },
+        undefined,
+        (c) => c(wrapper.vm)
+      );
 
-    //Assert
-    expect(arePagePrerequisitesValid).toBe(true);
-  });
-});
+      wrapper.vm.backButtonAction();
 
-describe("vehicle-damage.vue", () => {
-  test("BackButtonAction triggers a router.navigate change", async () => {
+      //Assert
+      expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
 
-    //Arrange
-    const { wrapper } = setupMocks({});
-
-    //Act
-    vehicleDamage.beforeRouteEnter.call(
-      wrapper.vm,
-      { query: { fmgPage: "vehicle-damage" } },
-      undefined,
-      (c) => c(wrapper.vm)
-    );
-
-    wrapper.vm.backButtonAction();
-
-    //Assert
-    expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
-
-  });
-});
-
-describe("vehicle-damage.vue", () => {
-  test("Replace several pieces of glass on ForwardButtonAction triggers a router.navigateAfterSave and saves selections to store", async () => {
-    //Arrange
-    const partsData = {
-      partsOrQuestions: [{
-        glassName: "Single",
-        glassLocation: "Windshield",
-        parts: null,
-        partQuestions: [{
-          questionSequence: 1,
-          questionText: "Is your vehicle equipped with a heated steering wheel?",
-          answers: [{
-            answerText: "Yes",
-            nextQuestionSequence: null,
-            answerResult: "FW04957"
-          },
-          {
-            answerText: "No",
-            nextQuestionSequence: 2,
-            answerResult: ""
-          }]
-        },
-        {
-          questionSequence: 2,
-          questionText: "Is your vehicle equipped with a remote start?",
-          answers: [{
-            answerText: "Yes",
-            nextQuestionSequence: null,
-            answerResult: "FW04181"
-          },
-          {
-            answerText: "No",
-            nextQuestionSequence: null,
-            answerResult: "FW04179"
-          }]
-        }]
-      }]
-    };
-
-    const { wrapper } = setupMocks({
-      pageHeaderWidgetHeaderText: "",
-      mountOptionsMockData: {
-        router: { navigateAfterSave: jest.fn(), },
-        actionList: [{ actionName: storeActions.GET_PARTS_OR_QUESTIONS, data: partsData, },],
-        store: {
-          getters: {
-            vehicle: {},
-            payment: { insuranceCoverage: { isVerified: false } },
-          },
-        },
-      },
     });
 
-    wrapper.vm.selectedDamageLocations = ["Windshield", "SideDoor", "RearWindow"];
-    wrapper.vm.selectedWindshieldOptions = { 
-      selectedWindshieldChipCount : null,
-      selectedWindshieldReplaceOptions : ["Single"], 
-      selectedWindshieldDamageType: ["Replace"]
-    };
-
-    wrapper.vm.sideDoorOptionsData = { 
-      selectedDoorSides: ["DriverSide", "PassengerSide"],
-      selectedDriverSideReplaceOptions: ["Back"], 
-      selectedPassengerSideReplaceOptions: ["Quarter"]
-    };
-
-    wrapper.vm.selectedRearReplaceOptions = ["Stationary"];
-
-    const expectedGlassToReplace = [{location: "Windshield", name: "Single"}, {location: "Driver", name: "Back"}, 
-      {location: "Passenger", name: "Quarter"}, {location: "Rear", name: "Stationary"}];
-
-    //Act
-    vehicleDamage.beforeRouteEnter.call(
-      wrapper.vm,
-      { query: { fmgPage: "vehicle-damage" } },
-      undefined,
-      (c) => c(wrapper.vm)
-    );
-      
-    await wrapper.vm.forwardButtonAction();
-
-    //Assert
-    expect(wrapper.vm.$router.navigateAfterSave).toHaveBeenCalled();
-    expect(wrapper.vm.selectedGlassToReplace()).toEqual(expectedGlassToReplace);
-    expect(store.commit).toBeCalledWith(storeMutations.UPDATE_IS_REPAIR, false);
-    expect(store.commit).toBeCalledWith(storeMutations.UPDATE_GLASS_TO_REPLACE, expectedGlassToReplace);
-  });
-});
-
-describe("vehicle-damage.vue", () => {
-  test("Windshield replace with multiple parts on ForwardButtonAction triggers a router.navigateAfterSave and saves selections to store", async () => {
-    //Arrange
-    const partsData = { partsOrQuestions: [
-      {
-        glassLocation: "Windshield",
-        glassName: "Single",
-        partQuestions: null,
-        parts: [
-          {
-            color: "Green Tint, Green Shade",
-            description: "rain sensor, solar",
-            partNumber: "FW02728GGYN",
-            requiresCapabilityQuestions: false,
-            requiresRecalibration: false 
-          },
-          {
-            color: "Green Tint, Green Shade",
-            description: "rain sensor, solar, hydrophobic coating",
-            partNumber: "FW02760GGYN",
-            requiresCapabilityQuestions: false,
-            requiresRecalibration: false
-          }
-        ]},
-        {
-          glassName: "Stationary",
-          glassLocation: "Rear",
-          parts: [
-            {
-              partNumber: "DB09626GTYN",
-              description: "heated glass, solar, antenna",
-              color: "Green Tint",
-              requiresRecalibration: false,
-              requiresCapabilityQuestions: false,
-              childParts: null
+    test("Replace several pieces of glass on ForwardButtonAction triggers a router.navigateAfterSave and saves selections to store", async () => {
+      //Arrange
+      const partsData = {
+        partsOrQuestions: [{
+          glassName: "Single",
+          glassLocation: "Windshield",
+          parts: null,
+          partQuestions: [{
+            questionSequence: 1,
+            questionText: "Is your vehicle equipped with a heated steering wheel?",
+            answers: [{
+              answerText: "Yes",
+              nextQuestionSequence: null,
+              answerResult: "FW04957"
             },
             {
-              partNumber: "DB09821GTYN",
-              description: "heated glass, solar, antenna, onstar",
-              color: "Green Tint",
-              requiresRecalibration: false,
-              requiresCapabilityQuestions: false,
-              childParts: null
-            }
-          ],
-          "partQuestions": null
-        }
-      ]};
-
-    const { wrapper } = setupMocks({
-      pageHeaderWidgetHeaderText: "",
-      mountOptionsMockData: {
-        router: { navigateAfterSave: jest.fn(), },
-        actionList: [{ actionName: storeActions.GET_PARTS_OR_QUESTIONS, data: partsData, },],
-        store: {
-          getters: {
-            vehicle: {},
-            payment: { insuranceCoverage: { isVerified: false } },
+              answerText: "No",
+              nextQuestionSequence: 2,
+              answerResult: ""
+            }]
           },
-        },
-      },
-    });
-
-    wrapper.vm.selectedDamageLocations = ["Windshield"];
-    wrapper.vm.selectedWindshieldOptions = { 
-      selectedWindshieldChipCount : null,
-      selectedWindshieldReplaceOptions : ["Single"], 
-      selectedWindshieldDamageType: ["Replace"]
-    };
-
-    const expectedGlassToReplace = [{location: "Windshield", name: "Single"},];
-
-    //Act
-    vehicleDamage.beforeRouteEnter.call(
-      wrapper.vm,
-      { query: { fmgPage: "vehicle-damage" } },
-      undefined,
-      (c) => c(wrapper.vm)
-    );
-      
-    await wrapper.vm.forwardButtonAction();
-
-    //Assert
-    expect(wrapper.vm.$router.navigateAfterSave).toHaveBeenCalled();
-    expect(wrapper.vm.selectedGlassToReplace()).toEqual(expectedGlassToReplace);
-    expect(store.commit).toBeCalledWith(storeMutations.UPDATE_IS_REPAIR, false);
-    expect(store.commit).toBeCalledWith(storeMutations.UPDATE_GLASS_TO_REPLACE, expectedGlassToReplace);
-  });
-});
-
-describe("vehicle-damage.vue", () => {
-  test("isWindshieldDamageLocation is true when windshield is selected", async () => {
-
-    //Arrange
-    const { wrapper } = setupMocks({});
-
-    //Act
-    vehicleDamage.beforeRouteEnter.call(
-      wrapper.vm,
-      { query: { fmgPage: "vehicle-damage" } },
-      undefined,
-      (c) => c(wrapper.vm)
-    );
-
-    wrapper.vm.selectedDamageLocations = ["Windshield"];
-
-    //Assert
-    expect(wrapper.vm.isWindshieldDamageLocation).toEqual(true);
-  });
-});
-
-describe("vehicle-damage.vue", () => {
-  test("isSideDoorDamageLocation is true Side door is selected", async () => {
-
-    //Arrange
-    const { wrapper } = setupMocks({});
-
-    //Act
-    vehicleDamage.beforeRouteEnter.call(
-      wrapper.vm,
-      { query: { fmgPage: "vehicle-damage" } },
-      undefined,
-      (c) => c(wrapper.vm)
-    );
-
-    wrapper.vm.selectedDamageLocations = ["Sidedoor"];
-
-    //Assert
-    expect(wrapper.vm.isSideDoorDamageLocation).toEqual(true);
-  });
-});
-
-
-describe("vehicle-damage.vue", () => {
-  test("isRearWindowDamageLocation is true if Rear Window damage is selected", async () => {
-
-    //Arrange
-    const { wrapper } = setupMocks({});
-
-    //Act
-    vehicleDamage.beforeRouteEnter.call(
-      wrapper.vm,
-      { query: { fmgPage: "vehicle-damage" } },
-      undefined,
-      (c) => c(wrapper.vm)
-    );
-
-    wrapper.vm.selectedDamageLocations = ["RearWindow"];
-
-    //Assert
-    expect(wrapper.vm.isRearWindowDamageLocation).toEqual(true);
-  });
-});
-
-describe("vehicle-damage.vue", () => {
-  test("isWindshieldRepair is true if windshield repair is selected", async () => {
-
-    //Arrange
-    const { wrapper } = setupMocks({});
-
-    //Act
-    vehicleDamage.beforeRouteEnter.call(
-      wrapper.vm,
-      { query: { fmgPage: "vehicle-damage" } },
-      undefined,
-      (c) => c(wrapper.vm)
-    );
-
-    wrapper.vm.selectedDamageLocations = ["Windshield"];
-    wrapper.vm.selectedWindshieldOptions = { selectedWindshieldDamageType: ["Repair"]};
-
-    //Assert
-    expect(wrapper.vm.isWindshieldRepair).toEqual(true);
-  });
-});
-
-describe("vehicle-damage.vue", () => {
-  test("isWindshieldRepair is false if windshield damage is not selected", async () => {
-
-    //Arrange
-    const { wrapper } = setupMocks({});
-
-    //Act
-    vehicleDamage.beforeRouteEnter.call(
-      wrapper.vm,
-      { query: { fmgPage: "vehicle-damage" } },
-      undefined,
-      (c) => c(wrapper.vm)
-    );
-
-    wrapper.vm.selectedDamageLocations = ["SideDoor"];
-    wrapper.vm.selectedWindshieldOptions = { selectedWindshieldDamageType: ["Repair"]};
-
-    //Assert
-    expect(wrapper.vm.isWindshieldRepair).toEqual(false);
-  });
-});
-
-describe("vehicle-damage.vue", () => {
-  test("isDriverSideReplace is true if side door driver is selected", async () => {
-
-    //Arrange
-    const { wrapper } = setupMocks({});
-
-    //Act
-    vehicleDamage.beforeRouteEnter.call(
-      wrapper.vm,
-      { query: { fmgPage: "vehicle-damage" } },
-      undefined,
-      (c) => c(wrapper.vm)
-    );
-
-    wrapper.vm.selectedDamageLocations = ["Sidedoor"];
-    wrapper.vm.sideDoorOptionsData = { selectedDoorSides: ["DriverSide"]};
-
-    //Assert
-    expect(wrapper.vm.isDriverSideReplace).toEqual(true);
-  });
-});
-
-describe("vehicle-damage.vue", () => {
-  test("isPassengerSideReplace is true if side door passenger selected", async () => {
-
-    //Arrange
-    const { wrapper } = setupMocks({});
-
-    //Act
-    vehicleDamage.beforeRouteEnter.call(
-      wrapper.vm,
-      { query: { fmgPage: "vehicle-damage" } },
-      undefined,
-      (c) => c(wrapper.vm)
-    );
-
-    wrapper.vm.selectedDamageLocations = ["Sidedoor"];
-    wrapper.vm.sideDoorOptionsData = { selectedDoorSides: ["PassengerSide"]};
-
-    //Assert
-    expect(wrapper.vm.isPassengerSideReplace).toEqual(true);
-  });
-});
-
-describe("vehicle-damage.vue", () => {
-  test("Call invalidation, ResetPartsAndState should be called", async () => {
-
-    //Arrange
-    const { wrapper } = setupMocks({});
-
-    //Act
-    vehicleDamage.beforeRouteEnter.call(
-      wrapper.vm,
-      { query: { fmgPage: "vehicle-damage" } },
-      undefined,
-      (c) => c(wrapper.vm)
-    );
-
-    wrapper.vm.resetDependentState();
-
-    //Assert
-    expect(store.dispatch).toBeCalledWith(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES)
-
-  });
-});
-
-const damageLocations = [["Windshield", [damageLocationsSelected.WINDSHIELD]],
-               ["Driver", [damageLocationsSelected.SIDEDOOR]],
-               ["Passenger", [damageLocationsSelected.SIDEDOOR]],
-               ["Rear", [damageLocationsSelected.REARWINDOW]]];
-describe("vehicle-damage.vue", () => {
-  test.each(damageLocations)("getDamageLocationsFromStore for %s returns expected %s", async (damageLocation, expectedGlass) => {
-
-    //Arrange
-    const { wrapper } = setupMocks({});
-
-    //Act
-    vehicleDamage.beforeRouteEnter.call(
-      wrapper.vm,
-      { query: { fmgPage: "vehicle-damage" } },
-      undefined,
-      (c) => c(wrapper.vm)
-    );
-
-    store.getters = { vehicle: { carId: "C0000000" }, eventBusItem: jest.fn(), damage: { glassToReplace: [{location: damageLocation}] }, isRepair: true};
-
-    var glassSelections = wrapper.vm.getDamageLocationsFromStore();
-      
-    //Assert
-    expect(glassSelections).toEqual(expectedGlass);
-
-  });
-});
-
-const storeWindshieldOptions = [[1, false, "Windshield", "Single", { selectedWindshieldDamageType: [damageLocationsSelected.REPLACE], 
-                                selectedWindshieldChipCount: [], selectedWindshieldReplaceOptions: [damageLocationsSelected.SINGLE]}],
-                                [2, false, "Windshield", "Driver", { selectedWindshieldDamageType: [damageLocationsSelected.REPLACE], 
-                                  selectedWindshieldChipCount: [], selectedWindshieldReplaceOptions: [damageLocationsSelected.DRIVER]}],
-                                [3, false, "Windshield", "Passenger", { selectedWindshieldDamageType: [damageLocationsSelected.REPLACE], 
-                                  selectedWindshieldChipCount: [], selectedWindshieldReplaceOptions: [damageLocationsSelected.PASSENGER]}],
-                                [4, true, "", "", { selectedWindshieldDamageType: [damageLocationsSelected.REPAIR], 
-                                  selectedWindshieldChipCount: [2], selectedWindshieldReplaceOptions: []}]
-                               ];
-describe("vehicle-damage.vue", () => {
-  test.each(storeWindshieldOptions)("getWindshieldOptionsFromStore test #%s", async (testNum, isRepair, damageLocation, damageName, expectedWindshieldOptions) => {
-
-    //Arrange
-    const { wrapper } = setupMocks({});
-
-    //Act
-    vehicleDamage.beforeRouteEnter.call(
-      wrapper.vm,
-      { query: { fmgPage: "vehicle-damage" } },
-      undefined,
-      (c) => c(wrapper.vm)
-    );
-
-    store.getters = { 
-      vehicle: 
-        { carId: "C0000000" }, 
-        eventBusItem: jest.fn(),
-        damage: 
-          { 
-            glassToReplace: [{location: damageLocation, name: damageName}],
-            isRepair: isRepair,
-            numberOfChips: 2 
-          }, 
+          {
+            questionSequence: 2,
+            questionText: "Is your vehicle equipped with a remote start?",
+            answers: [{
+              answerText: "Yes",
+              nextQuestionSequence: null,
+              answerResult: "FW04181"
+            },
+            {
+              answerText: "No",
+              nextQuestionSequence: null,
+              answerResult: "FW04179"
+            }]
+          }]
+        }]
       };
 
-    var windshieldSelections = wrapper.vm.getWindshieldOptionsFromStore();
-      
-    //Assert
-    expect(windshieldSelections).toEqual(expectedWindshieldOptions);
+      const { wrapper } = setupMocks({
+        pageHeaderWidgetHeaderText: "",
+        mountOptionsMockData: {
+          router: { navigateAfterSave: jest.fn(), },
+          actionList: [{ actionName: storeActions.GET_PARTS_OR_QUESTIONS, data: partsData, },],
+          store: {
+            getters: {
+              vehicle: {},
+              payment: { insuranceCoverage: { isVerified: false } },
+            },
+          },
+        },
+      });
+
+      wrapper.vm.selectedDamageLocations = ["Windshield", "SideDoor", "RearWindow"];
+      wrapper.vm.selectedWindshieldOptions = {
+        selectedWindshieldChipCount: null,
+        selectedWindshieldReplaceOptions: ["Single"],
+        selectedWindshieldDamageType: ["Replace"]
+      };
+
+      wrapper.vm.sideDoorOptionsData = {
+        selectedDoorSides: ["DriverSide", "PassengerSide"],
+        selectedDriverSideReplaceOptions: ["Back"],
+        selectedPassengerSideReplaceOptions: ["Quarter"]
+      };
+
+      wrapper.vm.selectedRearReplaceOptions = ["Stationary"];
+
+      const expectedGlassToReplace = [{ location: "Windshield", name: "Single" }, { location: "Driver", name: "Back" },
+      { location: "Passenger", name: "Quarter" }, { location: "Rear", name: "Stationary" }];
+
+      //Act
+      vehicleDamage.beforeRouteEnter.call(
+        wrapper.vm,
+        { query: { fmgPage: "vehicle-damage" } },
+        undefined,
+        (c) => c(wrapper.vm)
+      );
+
+      await wrapper.vm.forwardButtonAction();
+
+      //Assert
+      expect(wrapper.vm.$router.navigateAfterSave).toHaveBeenCalled();
+      expect(wrapper.vm.selectedGlassToReplace()).toEqual(expectedGlassToReplace);
+      expect(store.commit).toBeCalledWith(storeMutations.UPDATE_IS_REPAIR, false);
+      expect(store.commit).toBeCalledWith(storeMutations.UPDATE_GLASS_TO_REPLACE, expectedGlassToReplace);
+    });
+
+    test("Windshield replace with multiple parts on ForwardButtonAction triggers a router.navigateAfterSave and saves selections to store", async () => {
+      //Arrange
+      const partsData = {
+        partsOrQuestions: [
+          {
+            glassLocation: "Windshield",
+            glassName: "Single",
+            partQuestions: null,
+            parts: [
+              {
+                color: "Green Tint, Green Shade",
+                description: "rain sensor, solar",
+                partNumber: "FW02728GGYN",
+                requiresCapabilityQuestions: false,
+                requiresRecalibration: false
+              },
+              {
+                color: "Green Tint, Green Shade",
+                description: "rain sensor, solar, hydrophobic coating",
+                partNumber: "FW02760GGYN",
+                requiresCapabilityQuestions: false,
+                requiresRecalibration: false
+              }
+            ]
+          },
+          {
+            glassName: "Stationary",
+            glassLocation: "Rear",
+            parts: [
+              {
+                partNumber: "DB09626GTYN",
+                description: "heated glass, solar, antenna",
+                color: "Green Tint",
+                requiresRecalibration: false,
+                requiresCapabilityQuestions: false,
+                childParts: null
+              },
+              {
+                partNumber: "DB09821GTYN",
+                description: "heated glass, solar, antenna, onstar",
+                color: "Green Tint",
+                requiresRecalibration: false,
+                requiresCapabilityQuestions: false,
+                childParts: null
+              }
+            ],
+            "partQuestions": null
+          }
+        ]
+      };
+
+      const { wrapper } = setupMocks({
+        pageHeaderWidgetHeaderText: "",
+        mountOptionsMockData: {
+          router: { navigateAfterSave: jest.fn(), },
+          actionList: [{ actionName: storeActions.GET_PARTS_OR_QUESTIONS, data: partsData, },],
+          store: {
+            getters: {
+              vehicle: {},
+              payment: { insuranceCoverage: { isVerified: false } },
+            },
+          },
+        },
+      });
+
+      wrapper.vm.selectedDamageLocations = ["Windshield"];
+      wrapper.vm.selectedWindshieldOptions = {
+        selectedWindshieldChipCount: null,
+        selectedWindshieldReplaceOptions: ["Single"],
+        selectedWindshieldDamageType: ["Replace"]
+      };
+
+      const expectedGlassToReplace = [{ location: "Windshield", name: "Single" },];
+
+      //Act
+      vehicleDamage.beforeRouteEnter.call(
+        wrapper.vm,
+        { query: { fmgPage: "vehicle-damage" } },
+        undefined,
+        (c) => c(wrapper.vm)
+      );
+
+      await wrapper.vm.forwardButtonAction();
+
+      //Assert
+      expect(wrapper.vm.$router.navigateAfterSave).toHaveBeenCalled();
+      expect(wrapper.vm.selectedGlassToReplace()).toEqual(expectedGlassToReplace);
+      expect(store.commit).toBeCalledWith(storeMutations.UPDATE_IS_REPAIR, false);
+      expect(store.commit).toBeCalledWith(storeMutations.UPDATE_GLASS_TO_REPLACE, expectedGlassToReplace);
+    });
+
 
   });
-});
 
-const driverDoorSides = [["Driver", "Front", [damageLocationsSelected.FRONT]],
-                   ["Driver", "Back", [damageLocationsSelected.BACK]],
-                   ["Driver", "Vent", [damageLocationsSelected.VENT]],
-                   ["Driver", "Quarter", [damageLocationsSelected.QUARTER]]
-                  ];
-describe("vehicle-damage.vue", () => {
-  test.each(driverDoorSides)("getDriverSideReplaceOptionsFromStore for %s-%s returns expected %s", async (damageLocation, damageName, expectedGlass) => {
-
-    //Arrange
-    const { wrapper } = setupMocks({});
-
-    //Act
-    vehicleDamage.beforeRouteEnter.call(
-      wrapper.vm,
-      { query: { fmgPage: "vehicle-damage" } },
-      undefined,
-      (c) => c(wrapper.vm)
-    );
-
-    store.getters = { vehicle: { carId: "C0000000" }, eventBusItem: jest.fn(), damage: { glassToReplace: [{location: damageLocation, name: damageName}] }, isRepair: true};
-
-    var glassSelections = wrapper.vm.getDriverSideReplaceOptionsFromStore();
-      
-    //Assert
-    expect(glassSelections).toEqual(expectedGlass);
-
-  });
-});
-
-const passengerDoorSides = [["Passenger", "Front", [damageLocationsSelected.FRONT]],
-                   ["Passenger", "Back", [damageLocationsSelected.BACK]],
-                   ["Passenger", "Vent", [damageLocationsSelected.VENT]],
-                   ["Passenger", "Quarter", [damageLocationsSelected.QUARTER]]
-                  ];
-describe("vehicle-damage.vue", () => {
-  test.each(passengerDoorSides)("getPassengerSideReplaceOptionsFromStore for %s-%s returns expected %s", async (damageLocation, damageName, expectedGlass) => {
-
-    //Arrange
-    const { wrapper } = setupMocks({});
-
-    //Act
-    vehicleDamage.beforeRouteEnter.call(
-      wrapper.vm,
-      { query: { fmgPage: "vehicle-damage" } },
-      undefined,
-      (c) => c(wrapper.vm)
-    );
-
-    store.getters = { vehicle: { carId: "C0000000" }, eventBusItem: jest.fn(), damage: { glassToReplace: [{location: damageLocation, name: damageName}] }, isRepair: true};
-
-    var glassSelections = wrapper.vm.getPassengerSideReplaceOptionsFromStore();
-      
-    //Assert
-    expect(glassSelections).toEqual(expectedGlass);
-
-  });
-});
-
-const rearReplaceOptions = [["Rear", "Stationary", [damageLocationsSelected.STATIONARY]],
-                   ["Rear", "Slider", [damageLocationsSelected.SLIDER]]
-                  ];
-describe("vehicle-damage.vue", () => {
-  test.each(rearReplaceOptions)("getRearReplaceOptionsFromStore for %s-%s returns expected %s", async (damageLocation, damageName, expectedGlass) => {
-
-    //Arrange
-    const { wrapper } = setupMocks({});
-
-    //Act
-    vehicleDamage.beforeRouteEnter.call(
-      wrapper.vm,
-      { query: { fmgPage: "vehicle-damage" } },
-      undefined,
-      (c) => c(wrapper.vm)
-    );
-
-    store.getters = { vehicle: { carId: "C0000000" }, eventBusItem: jest.fn(), damage: { glassToReplace: [{location: damageLocation, name: damageName}] }, isRepair: true};
-
-    var glassSelections = wrapper.vm.getRearReplaceOptionsFromStore();
-      
-    //Assert
-    expect(glassSelections).toEqual(expectedGlass);
-
-  });
-});
-
-describe("vehicle-damage.vue", () => {
-  test("when displayVehicleChangeAlert router params is true, the alert: 'vehicleChangeAlert' should be visible", () => {
-    // Arrange & Act
-    const { wrapper } = setupMocks({
-      mountOptionsMockData: {
-        route: {
-          params: {
-            [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true
+  describe("alert", () => {
+    test("when displayVehicleChangeAlert router params is true, the alert: 'vehicleChangeAlert' should be visible", () => {
+      // Arrange & Act
+      const { wrapper } = setupMocks({
+        mountOptionsMockData: {
+          route: {
+            params: {
+              [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true
+            }
           }
         }
-      }
+      });
+      // Assert
+      expect(wrapper.findComponent({ ref: 'vehicleChangeAlert' }).isVisible()).toBe(true);
     });
-    // Assert
-    expect(wrapper.findComponent({ref: 'vehicleChangeAlert'}).isVisible()).toBe(true);
-  })
-});
 
-describe("vehicle-damage.vue", () => {
-  test("when displayVehicleChangeAlert router params is false, the alert: 'vehicleChangeAlert' should not be visible", () => {
-    // Arrange & Act
-    const { wrapper } = setupMocks({
-      mountOptionsMockData: {
-        route: {
-          params: {
-            [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: false
+    test("when displayVehicleChangeAlert router params is false, the alert: 'vehicleChangeAlert' should not be visible", () => {
+      // Arrange & Act
+      const { wrapper } = setupMocks({
+        mountOptionsMockData: {
+          route: {
+            params: {
+              [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: false
+            }
           }
         }
-      }
+      });
+      // Assert
+      expect(wrapper.findComponent({ ref: 'vehicleChangeAlert' }).isVisible()).toBe(false);
     });
-    // Assert
-    expect(wrapper.findComponent({ref: 'vehicleChangeAlert'}).isVisible()).toBe(false);
-  })
-});
 
-describe("vehicle-damage.vue", () => {
-  test("when displayVehicleChangeAlert router params is undefined, the alert: 'vehicleChangeAlert' should not be visible", () => {
-    // Arrange & Act
-    const { wrapper } = setupMocks({
-      mountOptionsMockData: {
-        route: {
-          params: {
-            [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: undefined
+    test("when displayVehicleChangeAlert router params is undefined, the alert: 'vehicleChangeAlert' should not be visible", () => {
+      // Arrange & Act
+      const { wrapper } = setupMocks({
+        mountOptionsMockData: {
+          route: {
+            params: {
+              [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: undefined
+            }
           }
         }
-      }
-    });
-    // Assert
-    expect(wrapper.findComponent({ref: 'vehicleChangeAlert'}).isVisible()).toBe(false);
-  })
-});
-
-describe("vehicle-damage.vue wasDelayedClaimRegistration", () => {
-  test.todo("if wasDelayedClaimRegistration, should hide back button")
-});
-
-// THE FOLLOWING TEST IS NOT NECESSARILY REQUIRED FOR COVERAGE
-//    BUT KEEP FOR AN EXAMPLE OF A VALIDATION TEST
-// 
-describe("vehicle-damage.vue", () => {
-  test("when validation rules are set they should validate correctly", async () => {
-
-    //Arrange
-    const { wrapper } = setupMocks({});
-    
-    //Act
-    vehicleDamage.beforeRouteEnter.call(
-      wrapper.vm,
-      { query: { fmgPage: "vehicle-damage" } },
-      undefined,
-      (c) => c(wrapper.vm)
-    );
-    const testNull = validate( "", "replace-options-required");
-    const testString = validate( "sldfj", "replace-options-required");
-
-    //Assert
-    testNull.then(function(data) {
-      expect(data.valid).toEqual(false);
-    });
-    testString.then(function(data) {
-      expect(data.valid).toEqual(true);
-    });
-
+      });
+      // Assert
+      expect(wrapper.findComponent({ ref: 'vehicleChangeAlert' }).isVisible()).toBe(false);
+    })
   });
+
+  describe("glass selections and corresponding variables", () => {
+    test("isWindshieldDamageLocation is true when windshield is selected", async () => {
+
+      //Arrange
+      const { wrapper } = setupMocks({});
+
+      //Act
+      vehicleDamage.beforeRouteEnter.call(
+        wrapper.vm,
+        { query: { fmgPage: "vehicle-damage" } },
+        undefined,
+        (c) => c(wrapper.vm)
+      );
+
+      wrapper.vm.selectedDamageLocations = ["Windshield"];
+
+      //Assert
+      expect(wrapper.vm.isWindshieldDamageLocation).toEqual(true);
+    });
+
+    test("isSideDoorDamageLocation is true Side door is selected", async () => {
+
+      //Arrange
+      const { wrapper } = setupMocks({});
+
+      //Act
+      vehicleDamage.beforeRouteEnter.call(
+        wrapper.vm,
+        { query: { fmgPage: "vehicle-damage" } },
+        undefined,
+        (c) => c(wrapper.vm)
+      );
+
+      wrapper.vm.selectedDamageLocations = ["Sidedoor"];
+
+      //Assert
+      expect(wrapper.vm.isSideDoorDamageLocation).toEqual(true);
+    });
+
+    test("isRearWindowDamageLocation is true if Rear Window damage is selected", async () => {
+
+      //Arrange
+      const { wrapper } = setupMocks({});
+
+      //Act
+      vehicleDamage.beforeRouteEnter.call(
+        wrapper.vm,
+        { query: { fmgPage: "vehicle-damage" } },
+        undefined,
+        (c) => c(wrapper.vm)
+      );
+
+      wrapper.vm.selectedDamageLocations = ["RearWindow"];
+
+      //Assert
+      expect(wrapper.vm.isRearWindowDamageLocation).toEqual(true);
+    });
+
+    test("isWindshieldRepair is true if windshield repair is selected", async () => {
+
+      //Arrange
+      const { wrapper } = setupMocks({});
+
+      //Act
+      vehicleDamage.beforeRouteEnter.call(
+        wrapper.vm,
+        { query: { fmgPage: "vehicle-damage" } },
+        undefined,
+        (c) => c(wrapper.vm)
+      );
+
+      wrapper.vm.selectedDamageLocations = ["Windshield"];
+      wrapper.vm.selectedWindshieldOptions = { selectedWindshieldDamageType: ["Repair"] };
+
+      //Assert
+      expect(wrapper.vm.isWindshieldRepair).toEqual(true);
+    });
+
+    test("isWindshieldRepair is false if windshield damage is not selected", async () => {
+
+      //Arrange
+      const { wrapper } = setupMocks({});
+
+      //Act
+      vehicleDamage.beforeRouteEnter.call(
+        wrapper.vm,
+        { query: { fmgPage: "vehicle-damage" } },
+        undefined,
+        (c) => c(wrapper.vm)
+      );
+
+      wrapper.vm.selectedDamageLocations = ["SideDoor"];
+      wrapper.vm.selectedWindshieldOptions = { selectedWindshieldDamageType: ["Repair"] };
+
+      //Assert
+      expect(wrapper.vm.isWindshieldRepair).toEqual(false);
+    });
+
+    test("isDriverSideReplace is true if side door driver is selected", async () => {
+
+      //Arrange
+      const { wrapper } = setupMocks({});
+
+      //Act
+      vehicleDamage.beforeRouteEnter.call(
+        wrapper.vm,
+        { query: { fmgPage: "vehicle-damage" } },
+        undefined,
+        (c) => c(wrapper.vm)
+      );
+
+      wrapper.vm.selectedDamageLocations = ["Sidedoor"];
+      wrapper.vm.sideDoorOptionsData = { selectedDoorSides: ["DriverSide"] };
+
+      //Assert
+      expect(wrapper.vm.isDriverSideReplace).toEqual(true);
+    });
+
+    test("isPassengerSideReplace is true if side door passenger selected", async () => {
+
+      //Arrange
+      const { wrapper } = setupMocks({});
+
+      //Act
+      vehicleDamage.beforeRouteEnter.call(
+        wrapper.vm,
+        { query: { fmgPage: "vehicle-damage" } },
+        undefined,
+        (c) => c(wrapper.vm)
+      );
+
+      wrapper.vm.selectedDamageLocations = ["Sidedoor"];
+      wrapper.vm.sideDoorOptionsData = { selectedDoorSides: ["PassengerSide"] };
+
+      //Assert
+      expect(wrapper.vm.isPassengerSideReplace).toEqual(true);
+    });
+  });
+
+  describe("state validations", () => {
+    test("CarId set, arePagePrerequisitesValid should be true ", async () => {
+      //Arrange
+      const { wrapper } = setupMocks({});
+
+      //Act
+      vehicleDamage.beforeRouteEnter.call(
+        wrapper.vm,
+        { query: { fmgPage: "vehicle-damage" } },
+        undefined,
+        (c) => c(wrapper.vm)
+      );
+
+      let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
+      await nextTick();
+
+      //Assert
+      expect(arePagePrerequisitesValid).toBe(true);
+    });
+
+    test("Call invalidation, ResetPartsAndState should be called", async () => {
+
+      //Arrange
+      const { wrapper } = setupMocks({});
+
+      //Act
+      vehicleDamage.beforeRouteEnter.call(
+        wrapper.vm,
+        { query: { fmgPage: "vehicle-damage" } },
+        undefined,
+        (c) => c(wrapper.vm)
+      );
+
+      wrapper.vm.resetDependentState();
+
+      //Assert
+      expect(store.dispatch).toBeCalledWith(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES)
+
+    });
+  });
+
+  describe("input validations", () => {
+    // THE FOLLOWING TEST IS NOT NECESSARILY REQUIRED FOR COVERAGE
+    //    BUT KEEP FOR AN EXAMPLE OF A VALIDATION TEST
+    test("when validation rules are set they should validate correctly", async () => {
+      //Arrange
+      const { wrapper } = setupMocks({});
+
+      //Act
+      vehicleDamage.beforeRouteEnter.call(
+        wrapper.vm,
+        { query: { fmgPage: "vehicle-damage" } },
+        undefined,
+        (c) => c(wrapper.vm)
+      );
+      const testNull = validate("", "replace-options-required");
+      const testString = validate("sldfj", "replace-options-required");
+
+      //Assert
+      testNull.then(function (data) {
+        expect(data.valid).toEqual(false);
+      });
+      testString.then(function (data) {
+        expect(data.valid).toEqual(true);
+      });
+    });
+  });
+
+  describe("get glass options from store", () => {
+    const damageLocations = [["Windshield", [damageLocationsSelected.WINDSHIELD]],
+    ["Driver", [damageLocationsSelected.SIDEDOOR]],
+    ["Passenger", [damageLocationsSelected.SIDEDOOR]],
+    ["Rear", [damageLocationsSelected.REARWINDOW]]];
+    test.each(damageLocations)("getDamageLocationsFromStore for %s returns expected %s", async (damageLocation, expectedGlass) => {
+
+      //Arrange
+      const { wrapper } = setupMocks({});
+
+      //Act
+      vehicleDamage.beforeRouteEnter.call(
+        wrapper.vm,
+        { query: { fmgPage: "vehicle-damage" } },
+        undefined,
+        (c) => c(wrapper.vm)
+      );
+
+      store.getters = { vehicle: { carId: "C0000000" }, eventBusItem: jest.fn(), damage: { glassToReplace: [{ location: damageLocation }] }, isRepair: true };
+
+      var glassSelections = wrapper.vm.getDamageLocationsFromStore();
+
+      //Assert
+      expect(glassSelections).toEqual(expectedGlass);
+    });
+
+    const storeWindshieldOptions = [[1, false, "Windshield", "Single", {
+      selectedWindshieldDamageType: [damageLocationsSelected.REPLACE],
+      selectedWindshieldChipCount: [], selectedWindshieldReplaceOptions: [damageLocationsSelected.SINGLE]
+    }],
+    [2, false, "Windshield", "Driver", {
+      selectedWindshieldDamageType: [damageLocationsSelected.REPLACE],
+      selectedWindshieldChipCount: [], selectedWindshieldReplaceOptions: [damageLocationsSelected.DRIVER]
+    }],
+    [3, false, "Windshield", "Passenger", {
+      selectedWindshieldDamageType: [damageLocationsSelected.REPLACE],
+      selectedWindshieldChipCount: [], selectedWindshieldReplaceOptions: [damageLocationsSelected.PASSENGER]
+    }],
+    [4, true, "", "", {
+      selectedWindshieldDamageType: [damageLocationsSelected.REPAIR],
+      selectedWindshieldChipCount: [2], selectedWindshieldReplaceOptions: []
+    }]
+    ];
+    test.each(storeWindshieldOptions)("getWindshieldOptionsFromStore test #%s", async (testNum, isRepair, damageLocation, damageName, expectedWindshieldOptions) => {
+
+      //Arrange
+      const { wrapper } = setupMocks({});
+
+      //Act
+      vehicleDamage.beforeRouteEnter.call(
+        wrapper.vm,
+        { query: { fmgPage: "vehicle-damage" } },
+        undefined,
+        (c) => c(wrapper.vm)
+      );
+
+      store.getters = {
+        vehicle:
+          { carId: "C0000000" },
+        eventBusItem: jest.fn(),
+        damage:
+        {
+          glassToReplace: [{ location: damageLocation, name: damageName }],
+          isRepair: isRepair,
+          numberOfChips: 2
+        },
+      };
+
+      var windshieldSelections = wrapper.vm.getWindshieldOptionsFromStore();
+
+      //Assert
+      expect(windshieldSelections).toEqual(expectedWindshieldOptions);
+    });
+
+    const driverDoorSides = [["Driver", "Front", [damageLocationsSelected.FRONT]],
+    ["Driver", "Back", [damageLocationsSelected.BACK]],
+    ["Driver", "Vent", [damageLocationsSelected.VENT]],
+    ["Driver", "Quarter", [damageLocationsSelected.QUARTER]]
+    ];
+    test.each(driverDoorSides)("getDriverSideReplaceOptionsFromStore for %s-%s returns expected %s", async (damageLocation, damageName, expectedGlass) => {
+
+      //Arrange
+      const { wrapper } = setupMocks({});
+
+      //Act
+      vehicleDamage.beforeRouteEnter.call(
+        wrapper.vm,
+        { query: { fmgPage: "vehicle-damage" } },
+        undefined,
+        (c) => c(wrapper.vm)
+      );
+
+      store.getters = { vehicle: { carId: "C0000000" }, eventBusItem: jest.fn(), damage: { glassToReplace: [{ location: damageLocation, name: damageName }] }, isRepair: true };
+
+      var glassSelections = wrapper.vm.getDriverSideReplaceOptionsFromStore();
+
+      //Assert
+      expect(glassSelections).toEqual(expectedGlass);
+
+    });
+
+    const passengerDoorSides = [["Passenger", "Front", [damageLocationsSelected.FRONT]],
+    ["Passenger", "Back", [damageLocationsSelected.BACK]],
+    ["Passenger", "Vent", [damageLocationsSelected.VENT]],
+    ["Passenger", "Quarter", [damageLocationsSelected.QUARTER]]
+    ];
+    test.each(passengerDoorSides)("getPassengerSideReplaceOptionsFromStore for %s-%s returns expected %s", async (damageLocation, damageName, expectedGlass) => {
+
+      //Arrange
+      const { wrapper } = setupMocks({});
+
+      //Act
+      vehicleDamage.beforeRouteEnter.call(
+        wrapper.vm,
+        { query: { fmgPage: "vehicle-damage" } },
+        undefined,
+        (c) => c(wrapper.vm)
+      );
+
+      store.getters = { vehicle: { carId: "C0000000" }, eventBusItem: jest.fn(), damage: { glassToReplace: [{ location: damageLocation, name: damageName }] }, isRepair: true };
+
+      var glassSelections = wrapper.vm.getPassengerSideReplaceOptionsFromStore();
+
+      //Assert
+      expect(glassSelections).toEqual(expectedGlass);
+    });
+
+    const rearReplaceOptions = [["Rear", "Stationary", [damageLocationsSelected.STATIONARY]],
+    ["Rear", "Slider", [damageLocationsSelected.SLIDER]]
+    ];
+    test.each(rearReplaceOptions)("getRearReplaceOptionsFromStore for %s-%s returns expected %s", async (damageLocation, damageName, expectedGlass) => {
+
+      //Arrange
+      const { wrapper } = setupMocks({});
+
+      //Act
+      vehicleDamage.beforeRouteEnter.call(
+        wrapper.vm,
+        { query: { fmgPage: "vehicle-damage" } },
+        undefined,
+        (c) => c(wrapper.vm)
+      );
+
+      store.getters = { vehicle: { carId: "C0000000" }, eventBusItem: jest.fn(), damage: { glassToReplace: [{ location: damageLocation, name: damageName }] }, isRepair: true };
+
+      var glassSelections = wrapper.vm.getRearReplaceOptionsFromStore();
+
+      //Assert
+      expect(glassSelections).toEqual(expectedGlass);
+    });
+  })
+
+  describe("hide back button", () => {
+    test.only("if claim registration is delayed => should hide back button", () => {
+      // Arrange
+      const { wrapper } = setupMocks({});
+      cookieHelper.getFunnelCookie = jest.spyOn(cookieHelper, "getFunnelCookie").mockReturnValue({
+        HasDelayedClaimRegistration: true
+      });
+
+      // Assert
+      expect(wrapper.vm.shouldHideBackButton()).toBe(true);
+
+    });
+
+    test.todo("if claim is verified => should hide back button")
+  });
+
 });
 
-
-function setupMocks({pageHeaderWidgetHeaderText, mountOptionsMockData}) {
+function setupMocks({ pageHeaderWidgetHeaderText, mountOptionsMockData }) {
   var pageHeaderWidgetHeaderTextDefault = {};
   var mountOptionsMockDataDefault = {
     router: {
@@ -787,11 +776,11 @@ function setupMocks({pageHeaderWidgetHeaderText, mountOptionsMockData}) {
 
   const backGlassOptionsWrapper = wrapper.findComponent({ name: "replaceOptionsQuestion" });
   backGlassOptionsWrapper.vm.initializeComponent =
-  replaceOptionsQuestion.methods.initializeComponent;
+    replaceOptionsQuestion.methods.initializeComponent;
 
   const damageLocationQuestionWrapper = wrapper.findComponent({ name: "damageLocationQuestion" });
   damageLocationQuestionWrapper.vm.initializeComponent =
-  damageLocationQuestion.methods.initializeComponent;
+    damageLocationQuestion.methods.initializeComponent;
 
   wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
 
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index d4e44feb7..266e2ba1a 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -405,7 +405,7 @@ export default {
     shouldDisplayVehicleChangeAlert() {
       return this.$route.params[this.routerParams.DISPLAY_VEHICLE_CHANGE_ALERT];
     },
-    shouldHideBackButton(){
+    shouldHideBackButton() {
       return this.$store.getters.payment.insuranceCoverage.isVerified || getFunnelCookie().HasDelayedClaimRegistration;
     }
   },

From 50c2b787e0739486e00f5ba2a1d065518d13a291 Mon Sep 17 00:00:00 2001
From: Katie <katie.oh@safelite.com>
Date: Wed, 25 May 2022 16:27:50 -0400
Subject: [PATCH 10/32] CSR-416 Add tests

---
 .../vehicle-damage/vehicle-damage.spec.js     | 44 ++++++++++++++-----
 1 file changed, 34 insertions(+), 10 deletions(-)

diff --git a/src/layouts/vehicle-damage/vehicle-damage.spec.js b/src/layouts/vehicle-damage/vehicle-damage.spec.js
index 0df5e2c28..46fa7763e 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.spec.js
+++ b/src/layouts/vehicle-damage/vehicle-damage.spec.js
@@ -666,24 +666,48 @@ describe("vehicle-damage.vue", () => {
   })
 
   describe("hide back button", () => {
-    test.only("if claim registration is delayed => should hide back button", () => {
+    test("if claim registration is delayed => should hide back button", () => {
       // Arrange
-      const { wrapper } = setupMocks({});
-      cookieHelper.getFunnelCookie = jest.spyOn(cookieHelper, "getFunnelCookie").mockReturnValue({
-        HasDelayedClaimRegistration: true
+      const { wrapper } = setupMocks({
+        funnelCookie: {
+          HasDelayedClaimRegistration: true
+        }
       });
 
       // Assert
-      expect(wrapper.vm.shouldHideBackButton()).toBe(true);
-
+      expect(wrapper.vm.shouldHideBackButton).toBe(true);
     });
 
-    test.todo("if claim is verified => should hide back button")
-  });
+    test("if claim is verified => should hide back button", () => {
+      // Arrange
+      const { wrapper } = setupMocks({
+        mountOptionsMockData: {
+          router: { navigateAfterSave: jest.fn(), },
+          actionList: [{ actionName: storeActions.GET_PARTS_OR_QUESTIONS, data: {}, },],
+          store: {
+            getters: {
+              vehicle: {},
+              payment: { insuranceCoverage: { isVerified: true } },
+            },
+          },
+        },
+      })
 
+      // Assert
+      expect(wrapper.vm.shouldHideBackButton).toBe(true);
+    })
+
+    test("if claim isn't verified yet => allow user to go back", () => {
+      // Arrange
+      const { wrapper } = setupMocks({});
+
+      // Assert
+      expect(wrapper.vm.shouldHideBackButton).toBeFalsy();
+    })
+  });
 });
 
-function setupMocks({ pageHeaderWidgetHeaderText, mountOptionsMockData }) {
+function setupMocks({ pageHeaderWidgetHeaderText, mountOptionsMockData, funnelCookie = {} }) {
   var pageHeaderWidgetHeaderTextDefault = {};
   var mountOptionsMockDataDefault = {
     router: {
@@ -740,7 +764,7 @@ function setupMocks({ pageHeaderWidgetHeaderText, mountOptionsMockData }) {
 
   settleAllPromises.mockImplementation(() => apiPromise);
   fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
-  cookieHelper.getFunnelCookie = jest.spyOn(cookieHelper, "getFunnelCookie").mockReturnValue({});
+  cookieHelper.getFunnelCookie = jest.spyOn(cookieHelper, "getFunnelCookie").mockReturnValue(funnelCookie);
 
   //Mock damage initialize methods
   damageLocationQuestion.methods = {

From f1b600b446dfbbe6a63ddba208ca942b26c57fea Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Thu, 26 May 2022 17:03:52 -0400
Subject: [PATCH 11/32] WIP footer menu modal.

---
 .../footer-menu-modal.spec.js                 |  1 +
 .../footer-menu-modal/footer-menu-modal.vue   | 52 ++++++++++++++
 .../funnel-footer/funnel-footer.vue           |  6 +-
 .../funnel-header/funnel-header.vue           |  6 ++
 .../menu-button/menu-button.vue               | 70 +++++++++++--------
 src/layouts/vehicle-damage/vehicle-damage.vue |  2 +-
 src/styles/common-styles.scss                 | 12 +++-
 src/styles/ux-variables.scss                  |  4 ++
 8 files changed, 120 insertions(+), 33 deletions(-)
 create mode 100644 src/common-components/footer-menu-modal/footer-menu-modal.spec.js
 create mode 100644 src/common-components/footer-menu-modal/footer-menu-modal.vue

diff --git a/src/common-components/footer-menu-modal/footer-menu-modal.spec.js b/src/common-components/footer-menu-modal/footer-menu-modal.spec.js
new file mode 100644
index 000000000..3d0843e10
--- /dev/null
+++ b/src/common-components/footer-menu-modal/footer-menu-modal.spec.js
@@ -0,0 +1 @@
+test.todo("some test to be written in the future");
diff --git a/src/common-components/footer-menu-modal/footer-menu-modal.vue b/src/common-components/footer-menu-modal/footer-menu-modal.vue
new file mode 100644
index 000000000..929461a53
--- /dev/null
+++ b/src/common-components/footer-menu-modal/footer-menu-modal.vue
@@ -0,0 +1,52 @@
+<template>
+  <!-- Modal -->
+  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-fullscreen">
+      <div class="modal-content">
+        <div class="modal-body d-flex flex-column">
+          <textLink linkType="navigation" text="Terms of use" href="https://www.safelite.com/terms-of-use" />
+          <textLink linkType="navigation" text="Privacy policy" href="https://www.safelite.com/safelite-group-privacy-policy" />
+          <textLink linkType="navigation" text="Do not sell my information" href="https://privacyportal-cdn.onetrust.com/dsarwebform/d3b95a93-e22e-4d4d-a806-482052406557/9e371601-eae3-4338-9430-b90b9036022b.html" />
+        </div>
+        <div class="modal-footer d-flex justify-content-start">
+          &copy; {{new Date().getFullYear()}} Safelite Group
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import textLink from "@/ux-components/text-link/text-link";
+export default {
+  name: 'footerMenuModal',
+  components: {
+    textLink,
+  },
+}
+</script>
+
+<style lang="scss">
+.modal {
+  max-width: 576px;
+  left: auto;
+  height: calc(100% - 72px);
+  top: 72px;
+  border-top: 1px solid $gray-300;
+  .modal-body {
+    padding: 2rem;
+  }
+    .modal-fullscreen {
+      width: 100vw;
+      max-width: 576px;
+  }
+  .navigation-link {
+    margin-bottom: 1.5rem;
+  }
+  .modal-footer {
+    border-top: none;
+    padding: 2rem;
+  }
+  //.modal-backdrop styles are in common-styles.scss
+}
+</style>
diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue
index 27ee88cb3..4e7ce11c4 100644
--- a/src/common-components/funnel-footer/funnel-footer.vue
+++ b/src/common-components/funnel-footer/funnel-footer.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="footer pt-4">
+  <footer class="footer pt-4">
     <div class="container-fluid g-2">
       <div class="row">
         <div class="col-12 d-flex justify-content-center pb-2 fs-7">
@@ -26,6 +26,7 @@
             :aria-disabled="isForwardActionDisabled"
             :isDisabled="isForwardActionDisabled"
             @click-event="buttonClick"
+            data-bs-dismiss="modal"
           />
         </div>
         <div v-if="!isBackButtonHidden" class="col-auto link-col py-1 text-break">
@@ -34,11 +35,12 @@
             :text="backLink"
             @click-event="linkClick"
             href="javascript:void(0)"
+            data-bs-dismiss="modal"
           />
         </div>
       </div>
     </div>
-  </div>
+  </footer>
 </template>
 
 <script>
diff --git a/src/common-components/funnel-header/funnel-header.vue b/src/common-components/funnel-header/funnel-header.vue
index 83d075a3a..7f477380d 100644
--- a/src/common-components/funnel-header/funnel-header.vue
+++ b/src/common-components/funnel-header/funnel-header.vue
@@ -4,6 +4,8 @@
     v-if="imageSrc"
   >
     <img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
+    <menuButton/>
+    <footerMenuModal/>
   </div>
   <alert
     class="position-absolute rounded-0 w-100 border-0 shadow-sm"
@@ -19,6 +21,8 @@
 import alert from "@/ux-components/alert/alert";
 import eventBus from "@/helpers/event-bus/event-bus";
 import { globalEvents } from "@/constants/events";
+import menuButton from "@/common-components/menu-button/menu-button";
+import footerMenuModal from "@/common-components/footer-menu-modal/footer-menu-modal";
 
 export default {
   name: "funnel-header",
@@ -43,6 +47,8 @@ export default {
   },
   components: {
     alert,
+    menuButton,
+    footerMenuModal,
   },
   mounted() {
     // Check if alert event is on the bus
diff --git a/src/common-components/menu-button/menu-button.vue b/src/common-components/menu-button/menu-button.vue
index c7b798f9a..477ad4989 100644
--- a/src/common-components/menu-button/menu-button.vue
+++ b/src/common-components/menu-button/menu-button.vue
@@ -1,8 +1,10 @@
 <template>
-  <div class="menu-button" :class="[isActive ? 'active' : '']" @click="toggleClass()">
-    <div class="bar1"></div>
-    <div class="bar2"></div>
-    <div class="bar3"></div>
+  <div class="menu-button-container">
+    <button class="menu-button" type="button" :class="[isActive ? 'active' : '']" @click="toggleClass()" data-bs-toggle="modal" data-bs-target="#exampleModal">
+      <div class="bar1"></div>
+      <div class="bar2"></div>
+      <div class="bar3"></div>
+    </button>
   </div>
 </template>
 
@@ -23,31 +25,41 @@ export default {
 </script>
 
 <style lang="scss">
-.menu-button {
-  width: 1.5rem;
-  height: 1.5rem;
-  border-radius: 50%;
-  box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.2);
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  .bar1,
-  .bar2,
-  .bar3 {
-    width: 14px;
-    height: 2px;
-    background-color: $blue-400;
-    margin: 1px 0;
-    transition: 0.25s;
-  }
-  &.active .bar1 {
-    transform: rotate(-45deg) translate(-3px, 3px);
-  }
-  &.active .bar2 {opacity: 0;}
-  &.active .bar3 {
-    transform: rotate(45deg) translate(-3px, -3px);
+.menu-button-container {
+  position: absolute;
+  top: 1.47rem;
+  right: 1.47rem;
+  button {
+    border: none;
+    &.menu-button {
+      width: 1.5rem;
+      height: 1.5rem;
+      border-radius: 50%;
+      box-shadow: 0 2px 8px 0 rgba(0,0,0,0.2);
+      background-color: $white;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      z-index: 1056;
+      .bar1,
+      .bar2,
+      .bar3 {
+        width: 14px;
+        height: 2px;
+        background-color: $blue-400;
+        margin: 1px 0;
+        transition: 0.25s;
+      }
+      &.active .bar1 {
+        transform: rotate(-45deg) translate(-3px, 3px);
+      }
+      &.active .bar2 {opacity: 0;}
+      &.active .bar3 {
+        transform: rotate(45deg) translate(-3px, -3px);
+      }
+    }
   }
 }
 </style>
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index d4e44feb7..557de9dae 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -5,7 +5,7 @@
       ref="theForm"
       v-slot="{ meta }"
     >
-      <div class="page-container-grouped-styles">
+      <div class="page-container-grouped-styles has-footer">
         <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
         <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage=false />
         <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index 850f346b1..13eb42d53 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -47,4 +47,14 @@ body {
   .page-container-grouped-styles {
     @extend .container-fluid, .shadow, .rounded-3, .p-2, .position-relative, .make-tall, .px-5;
   }
-}
\ No newline at end of file
+
+  //Footer modal backdrop adjustments for positioning
+  .modal-backdrop {
+    left: 50%;
+    transform: translateX(-50%);
+    max-width: 576px;
+    height: calc(100% - 152px);
+    top: 72px;
+  }
+
+}
diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss
index 88d95030e..52cf89169 100644
--- a/src/styles/ux-variables.scss
+++ b/src/styles/ux-variables.scss
@@ -180,3 +180,7 @@ $box-shadow-inset:            inset 0 1px 2px rgba($black, .075);
 $alert-bg-scale:                -90%;
 $alert-border-scale:            -100%;
 $alert-color-scale:             40%;
+
+//Modal animation
+$modal-fade-transform:              translate(0, 0);
+$modal-backdrop-opacity:            0;

From 8700ca9e3e63c8c07256784f4d3873db8a87c3f3 Mon Sep 17 00:00:00 2001
From: Katie <katie.oh@safelite.com>
Date: Fri, 27 May 2022 14:38:45 -0400
Subject: [PATCH 12/32] CSR-622 Don't load if referralNumber is empty

---
 src/helpers/heritage-integration/order-helper.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/helpers/heritage-integration/order-helper.js b/src/helpers/heritage-integration/order-helper.js
index d64ab865d..d32d2b570 100644
--- a/src/helpers/heritage-integration/order-helper.js
+++ b/src/helpers/heritage-integration/order-helper.js
@@ -12,7 +12,7 @@ export async function loadOrderIfPresent() {
     const funnelCookie = getFunnelCookie();
     
     // Do nothing if there is no cookie or no correlation id.
-    if (funnelCookie == null || funnelCookie.ReferralCorrelationId == null) {
+    if (funnelCookie == null || funnelCookie.ReferralCorrelationId == null || !funnelCookie.ReferralNumber) {
         return null;
     }
 

From e849a8a58e9aedbf3bb86f1829d96b4cbac6a846 Mon Sep 17 00:00:00 2001
From: Katie <katie.oh@safelite.com>
Date: Fri, 27 May 2022 14:40:04 -0400
Subject: [PATCH 13/32] CSR-622 Edit comment

---
 src/helpers/heritage-integration/order-helper.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/helpers/heritage-integration/order-helper.js b/src/helpers/heritage-integration/order-helper.js
index d32d2b570..962550592 100644
--- a/src/helpers/heritage-integration/order-helper.js
+++ b/src/helpers/heritage-integration/order-helper.js
@@ -11,7 +11,7 @@ import baseMixin from "@/mixins/base-mixin";
 export async function loadOrderIfPresent() {
     const funnelCookie = getFunnelCookie();
     
-    // Do nothing if there is no cookie or no correlation id.
+    // Do nothing if there is no cookie, correlation id, or referral number.
     if (funnelCookie == null || funnelCookie.ReferralCorrelationId == null || !funnelCookie.ReferralNumber) {
         return null;
     }

From f03e0737f872d190c2339ca85b3c082a0befa29a Mon Sep 17 00:00:00 2001
From: Katie <katie.oh@safelite.com>
Date: Fri, 27 May 2022 15:16:45 -0400
Subject: [PATCH 14/32] CSR-622 Fix tests

---
 src/helpers/heritage-integration/order-helper.spec.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/helpers/heritage-integration/order-helper.spec.js b/src/helpers/heritage-integration/order-helper.spec.js
index b66286d50..7d769a8d8 100644
--- a/src/helpers/heritage-integration/order-helper.spec.js
+++ b/src/helpers/heritage-integration/order-helper.spec.js
@@ -18,7 +18,8 @@ describe("loadOrderIfPresent", () => {
 
         const testCookieValue = {
             ShouldResetState: testShouldResetState,
-            ReferralCorrelationId: "xxx"
+            ReferralCorrelationId: "xxx",
+            ReferralNumber: "12345"
         }
 
         document.cookie = `${cookieNames.FUNNEL_SESSION_INFO}=${JSON.stringify(testCookieValue)}; path=/; ${cookieHelper.getCookieDomainValue()}`;
@@ -33,7 +34,11 @@ describe("loadOrderIfPresent", () => {
 
     test("ShouldResetState == true => reset store", () => {
         // Arrange
-        cookieHelper.getFunnelCookie = jest.spyOn(cookieHelper, "getFunnelCookie").mockReturnValueOnce({ ShouldResetState: true, ReferralCorrelationId: "xxx-xxx-xxx" });
+        cookieHelper.getFunnelCookie = jest.spyOn(cookieHelper, "getFunnelCookie").mockReturnValueOnce({ 
+            ShouldResetState: true, 
+            ReferralCorrelationId: "xxx-xxx-xxx",
+            ReferralNumber: "12345"
+        });
 
         const mockData = {
             actionList: [{

From 9bed77d2a022bcbd3e739a4d90a49126f6fc088b Mon Sep 17 00:00:00 2001
From: Katie <katie.oh@safelite.com>
Date: Fri, 27 May 2022 17:06:04 -0400
Subject: [PATCH 15/32] CSR-416 Add address-lookup tests

---
 src/helpers/unit-test-helper.js               |   3 +-
 .../address-lookup/address-lookup.spec.js     | 505 ++++++++++
 .../address-lookup/address-lookup.spec.js1    | 244 -----
 src/layouts/address-lookup/address-lookup.vue | 920 ++++++++++--------
 4 files changed, 1040 insertions(+), 632 deletions(-)
 create mode 100644 src/layouts/address-lookup/address-lookup.spec.js
 delete mode 100644 src/layouts/address-lookup/address-lookup.spec.js1

diff --git a/src/helpers/unit-test-helper.js b/src/helpers/unit-test-helper.js
index 4f4214120..07632f5e5 100644
--- a/src/helpers/unit-test-helper.js
+++ b/src/helpers/unit-test-helper.js
@@ -24,14 +24,13 @@ export function getMountOptions(mockData) {
   mocks.logEvent = jest.fn();
   mocks.pushExperimentsToDataLayer = jest.fn();
   mocks.prependActionToMethod = jest.fn();
-
   mocks.dispatchStoreAction = jest.fn();
   mocks.dispatchStoreAction.mockImplementation((actionName) => {
     let actionFilterResult = mockData.actionList.filter(
       (x) => x.actionName == actionName
     );
 
-    if (actionFilterResult.length > 0 && actionFilterResult.length === 1) {
+    if (actionFilterResult.length === 1) {
       return Promise.resolve({
         data: actionFilterResult[0].data,
       });
diff --git a/src/layouts/address-lookup/address-lookup.spec.js b/src/layouts/address-lookup/address-lookup.spec.js
new file mode 100644
index 000000000..885cacf50
--- /dev/null
+++ b/src/layouts/address-lookup/address-lookup.spec.js
@@ -0,0 +1,505 @@
+// Components
+import addressLookup from "@/layouts/address-lookup/address-lookup.vue";
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
+import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+import customerQuestions from "@/layouts/address-lookup/customer-questions/customer-questions";
+import addressQuestions from "@/layouts/address-lookup/customer-questions/address-questions/address-questions";
+import router from "@/router";
+
+// Supporting Files
+import { settleAllPromises } from "@/helpers/layout-helper.js";
+import baseMixin from "@/mixins/base-mixin";
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { mount, flushPromises, shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { maska } from 'maska';
+import { nextTick } from "vue";
+import { storeActions } from "@/constants/store-actions";
+import { storeMutations } from "@/constants/store-mutations";
+import store from "@/store";
+import { validate } from "vee-validate";
+import { isGlassAvailableForCarId } from "@/helpers/damage-helper.js"
+import { navigateAfterSaveToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
+import { EXPECTATION_FAILED } from "http-status-codes";
+
+// Mock our module for promises.
+// jest.mock("@/helpers/layout-helper.js", () => ({
+//     settleAllPromises: jest.fn(),
+// }));
+
+// // Mock fetchCmsContentForPage
+// jest.mock("@/helpers/cms-content-helper", () => ({
+//     fetchCmsContentForPage: jest.fn(),
+// }));
+
+jest.mock("@/helpers/damage-helper", () => ({
+  isGlassAvailableForCarId: jest.fn().mockImplementation(() => true),
+  getDamageString: jest.fn()
+}));
+
+jest.mock("@/helpers/heritage-integration/navigation-helper", () => ({
+  navigateAfterSaveToHeritageFunnel: jest.fn()
+}));
+
+
+// const questionText = "Question Text";
+// const mockMixin = {
+//   methods: {
+//     getCmsContent: jest.fn().mockImplementation(() => {
+//       return questionText;
+//     })
+//   }
+// }
+
+describe("address-lookup.vue", () => {
+  describe("registration and service zips", () => {
+    describe("if registration zip is serviceable", () => {
+      test("if registration address is provided => update service address on successful continue", async () => {
+        // Arrange
+        const mockRegistrationAddress = {
+          streetAddress: "1234 Main St",
+          city: "Columbus",
+          state: "OH",
+          zipCode: "43215"
+        }
+
+        const { wrapper } = setupMocks(addressLookup,{
+          isZipServiceable: true
+        });
+
+        store.commit(storeMutations.UPDATE_CAR_ID, "CARID");
+
+        await wrapper.setData({
+          customerQuestions: {
+            addressQuestions: mockRegistrationAddress
+          }
+        })
+
+        // Act
+        await wrapper.vm.forwardButtonAction();
+
+        // Assert 
+        expect(baseMixin.methods.dispatchStoreAction).toHaveBeenCalledWith(storeActions.UPDATE_SERVICE_LOCATION_WITH_VEHICLE_REGISTRATION);
+      });
+    });
+
+    describe("if registration zip is not serviceable", () => {
+      test("if registration address is provided and user clicks continue => show non-serviceable zip alert", async () => {
+        // Arrange
+        const mockRegistrationAddress = {
+          streetAddress: "1234 Main St",
+          city: "Columbus",
+          state: "OH",
+          zipCode: "43215"
+        }
+
+        const { wrapper } = setupMocks(addressLookup, {
+          isZipServiceable: false
+        });
+
+        store.commit(storeMutations.UPDATE_CAR_ID, "CARID");
+
+        await wrapper.setData({
+          customerQuestions: {
+            addressQuestions: mockRegistrationAddress
+          }
+        })
+
+        expect(wrapper.findComponent({ ref: "alertNonServiceableZip" }).exists()).toBe(false);
+
+        // Act
+        await wrapper.vm.forwardButtonAction();
+
+        // Assert 
+        expect(wrapper.vm.displayNonServiceableZipAlert).toBe(true);
+        expect(wrapper.findComponent({ ref: "alertNonServiceableZip" }).exists()).toBe(true);
+        expect(wrapper.findComponent({ ref: "alertNonServiceableZip" }).isVisible()).toBe(true);
+      });
+
+      test("if registration address is provided user clicks continue => show service zip field on continue click", async () => {
+        // Arrange
+        const mockRegistrationAddress = {
+          streetAddress: "1234 Main St",
+          city: "Columbus",
+          state: "OH",
+          zipCode: "43215"
+        }
+
+        const { wrapper } = setupMocks(addressLookup, {
+            isZipServiceable: false
+          }
+        );
+
+        expect(wrapper.vm.showServiceZipField).toBeFalsy();
+        expect(wrapper.findComponent({ ref: "serviceZip" }).exists()).toBe(false);
+        store.commit(storeMutations.UPDATE_CAR_ID, "CARID");
+
+        await wrapper.setData({
+          customerQuestions: {
+            addressQuestions: mockRegistrationAddress
+          }
+        })
+
+        // Act
+        await wrapper.vm.forwardButtonAction();
+
+        // Assert 
+        expect(wrapper.vm.showServiceZipField).toBe(true);
+        expect(wrapper.findComponent({ ref: "serviceZip" }).isVisible()).toBe(true);
+      });
+
+      test("if registration address, service zip are provided, and user clicks continue => don't update service address", async () => {
+        // Arrange
+        const mockRegistrationAddress = {
+          streetAddress: "1234 Main St",
+          city: "Columbus",
+          state: "OH",
+          zipCode: "43215"
+        }
+
+        const { wrapper } = setupMocks(addressLookup, {
+            isZipServiceable: false
+          }
+        );
+
+        store.commit(storeMutations.UPDATE_CAR_ID, "CARID");
+
+        await wrapper.setData({
+          customerQuestions: {
+            addressQuestions: mockRegistrationAddress
+          }
+        })
+
+        // Act
+        await wrapper.vm.forwardButtonAction();
+
+        // Assert 
+        expect(baseMixin.methods.dispatchStoreAction).not.toHaveBeenCalledWith(storeActions.UPDATE_SERVICE_LOCATION_WITH_VEHICLE_REGISTRATION);
+      });
+
+      test("if registration address, service zip are provided, and user clicks continue => both zips are saved and are different", async () => {
+        // Arrange
+        const mockRegistrationAddress = {
+          streetAddress: "1234 Main St",
+          city: "Columbus",
+          state: "OH",
+          zipCode: "43215"
+        }
+
+        const { wrapper } = setupMocks(addressLookup, {});
+
+        store.commit(storeMutations.UPDATE_CAR_ID, "CARID");
+
+        baseMixin.methods.dispatchStoreAction = jest.fn();
+        baseMixin.methods.dispatchStoreAction.mockImplementation((actionName, value) => {
+          let data = {};
+          if (actionName == storeActions.VALIDATE_ZIP) {
+            if (value == "43215") {
+              data = {
+                isServiceable: false
+              };
+            }
+            else {
+              data = {
+                isServiceable: true
+              }
+            }
+          }
+          else if (actionName == storeActions.LOOKUP_VIN_BY_ADDRESS) {
+            data = {
+              isStatePermissible: true,
+              vinVehicles: [{
+                vin: "TEST_VIN",
+                vehicle: {
+                  carId: "CARID"
+                }
+              }]
+            }
+          }
+
+          return Promise.resolve({ data });
+        })
+
+        await wrapper.setData({
+          customerQuestions: {
+            addressQuestions: mockRegistrationAddress
+          }
+        })
+        await wrapper.vm.forwardButtonAction();
+        await wrapper.setData({
+          serviceZipCode: "12345"
+        })
+
+        // Act
+        await wrapper.vm.forwardButtonAction();
+
+        // Assert 
+        expect(store.getters.order.serviceLocation.zipCode).not.toEqual(store.getters.vehicle.registration.zipCode);
+        expect(store.getters.vehicle.registration.zipCode).toEqual("43215");
+        expect(store.getters.order.serviceLocation.zipCode).toEqual("12345");
+      });
+    });
+  });
+
+  describe.skip("initialization", () => {
+    test("Page header is initialized with api data", async (done) => {
+      //Arrange
+      const pageHeaderWidgetHeaderText = "Select Damage";
+      const { wrapper, apiPromise } = setupMocks({
+        pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText,
+      });
+
+      //Act
+      addressLookup.beforeRouteEnter.call(
+        wrapper.vm,
+        { query: { fmgPage: "address-lookup" } },
+        undefined,
+        (c) => c(wrapper.vm)
+      );
+
+      //Assert
+      apiPromise.finally(() => {
+        expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith(
+          pageHeaderWidgetHeaderText
+        );
+        done();
+      });
+    });
+
+    test("Customer Questions component is initialized with api data", async (done) => {
+      //Arrange
+      const StreetAddressQuestionWidget = { QuestionText: "test" };
+      const CityQuestionWidget = { QuestionText: "test" };
+      const StateQuestionWidget = { QuestionText: "test" };
+      const ZipQuestionWidget = { QuestionText: "test" };
+      const FirstNameQuestionWidget = { QuestionText: "test" };
+      const LastNameQuestionWidget = { QuestionText: "test" };
+      const EmailAddressQuestionWidget = { QuestionText: "test" };
+      const AlertVerificationWarningWidget = { HeaderText: "test", BodyText: "test" };
+      const AlertNoMatchWarningWidget = { HeaderText: "test", BodyText: "test" };
+
+      const widgets = [
+        StreetAddressQuestionWidget,
+        CityQuestionWidget,
+        StateQuestionWidget,
+        ZipQuestionWidget,
+        AlertVerificationWarningWidget,
+        AlertNoMatchWarningWidget,
+        FirstNameQuestionWidget,
+        LastNameQuestionWidget,
+        EmailAddressQuestionWidget,
+      ];
+
+      const { wrapper, apiPromise } = setupMocks({
+        cmsContent: widgets,
+      });
+
+      //Act
+      addressLookup.beforeRouteEnter.call(
+        wrapper.vm,
+        { query: { fmgPage: "address-lookup" } },
+        undefined,
+        (c) => c(wrapper.vm)
+      );
+
+      //Assert
+      apiPromise.finally(() => {
+        expect(customerQuestions.methods.initializeComponent).toHaveBeenCalledWith(
+          widgets
+        );
+        done();
+      });
+    });
+  });
+});
+
+function setupMocks(mountOptions, { isZipServiceable = true, lookupVinbyAddressResponse }) {
+  store.commit(storeMutations.RESET_STATE);
+  console.log(isZipServiceable)
+  const wrapper = shallowMount(addressLookup, getMountOptions({
+    ...mountOptions,
+    actionList: [
+      {
+        actionName: storeActions.VALIDATE_ZIP,
+        data: {
+          isServiceable: isZipServiceable
+        }
+      },
+      {
+        actionName: storeActions.LOOKUP_VIN_BY_ADDRESS,
+        data: lookupVinbyAddressResponse ? lookupVinbyAddressResponse : {
+          isStatePermissible: true,
+          vinVehicles: [{
+            vin: "TEST_VIN",
+            vehicle: {
+              carId: "CARID"
+            }
+          }]
+        }
+      }
+    ],
+    router: {
+      navigate: jest.fn(),
+      navigateAfterSave: jest.fn()
+    },
+  }));
+
+  wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => "");
+  wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
+  wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
+  wrapper.vm.$refs.funnelFooter.removeLoader = jest.fn();
+  wrapper.vm.$refs.loadingModal.showModal = jest.fn();
+
+  // jest.mock("@/store", () => ({
+  //   commit: jest.fn(),
+  //   dispatch: jest.fn(),
+  //   getters: {
+  //     vehicle: {
+  //       carId: "CARID"
+  //     }
+  //   },
+  // }));
+
+  return { wrapper };
+}
+
+// function setupMocks({
+//   pageHeaderWidgetHeaderText = {},
+//   mountOptionsMockData = {
+//     router: {
+//       navigate: jest.fn(),
+//     },
+//     store: {
+//       getters: {
+//         vehicle: {},
+//       },
+//     },
+//   },
+// }) {
+//   //Mock api responses
+//   baseMixin.methods.dispatchStoreAction = jest.fn();
+//   const apiResponses = {
+//     cmsContent: {
+//       FunnelSubHeaderWidget: pageHeaderWidgetHeaderText,
+//       VehicleBannerWidget: {
+//         GenericVehicleImage:
+//           "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
+//       },
+//       FunnelHeaderWidget: {
+//         LogoImage:
+//           "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
+//       },
+//       StreetAddressQuestionWidget: {
+//         QuestionText:
+//           "test"
+//       },
+//       CityQuestionWidget: {
+//         QuestionText:
+//           "test"
+//       },
+//       StateQuestionWidget: {
+//         QuestionText:
+//           "test"
+//       },
+//       ZipQuestionWidget: {
+//         QuestionText:
+//           "test"
+//       },
+//       FirstNameQuestionWidget: {
+//         QuestionText:
+//           "test"
+//       },
+//       LastNameQuestionWidget: {
+//         QuestionText:
+//           "test"
+//       },
+//       EmailAddressQuestionWidget: {
+//         QuestionText:
+//           "test"
+//       },
+//       AlertVerificationWarningWidget: {
+//         HeaderText:
+//           "test",
+//         BodyText:
+//           "test",
+//       },
+//       AlertNoMatchWarningWidget: {
+//         HeaderText:
+//           "test",
+//         BodyText:
+//           "test",
+//       },
+
+//     },
+//   };
+
+//   const apiPromise = Promise.resolve(apiResponses);
+
+//   settleAllPromises.mockImplementation(() => apiPromise);
+//   fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
+
+//   //Mock damage initialize methods
+//   funnelHeader.methods = {
+//     initializeComponent: jest.fn(),
+//   };
+
+//   vehicleBanner.methods = {
+//     initializeComponent: jest.fn(),
+//   };
+
+//   funnelSubHeader.methods = {
+//     initializeComponent: jest.fn(),
+//   };
+
+//   funnelFooter.methods = {
+//     initializeComponent: jest.fn(),
+//   };
+
+//   customerQuestions.methods = {
+//     initializeComponent: jest.fn(),
+//   };
+
+//   addressQuestions.methods = {
+//     initializeComponent: jest.fn(),
+//     setupAddressLookup: jest.fn(),
+//   };
+
+//   const mountOptions = getMountOptions(mountOptionsMockData);
+//   mountOptions['attachTo'] = document.body; // append wrapper to document.body to test DOM methods
+
+//   mountOptions.global.directives = {
+//     maska: maska
+//   };
+
+//   const wrapper = mount(addressLookup, mountOptions);
+
+//   const funnelHeaderWrapper = wrapper.findComponent({ name: "funnelHeader" });
+//   funnelHeaderWrapper.vm.initializeComponent =
+//     funnelHeader.methods.initializeComponent;
+
+//   const vehicleBannerWrapper = wrapper.findComponent({ name: "vehicleBanner" });
+//   vehicleBannerWrapper.vm.initializeComponent =
+//     vehicleBanner.methods.initializeComponent;
+
+//   const funnelSubHeaderWrapper = wrapper.findComponent({ name: "funnelSubHeader" });
+//   funnelSubHeaderWrapper.vm.initializeComponent =
+//     funnelSubHeader.methods.initializeComponent;
+
+//   const funnelFooterWrapper = wrapper.findComponent({ name: "funnelFooter" });
+//   funnelFooterWrapper.vm.initializeComponent =
+//     funnelFooter.methods.initializeComponent;
+
+//   const customerQuestionsWrapper = wrapper.findComponent({ name: "customerQuestions" });
+//   customerQuestionsWrapper.vm.initializeComponent =
+//     customerQuestions.methods.initializeComponent;
+
+//   const addressQuestionsWrapper = wrapper.findComponent({ name: "addressQuestions" });
+//   addressQuestionsWrapper.vm.initializeComponent =
+//     addressQuestions.methods.initializeComponent;
+//   addressQuestionsWrapper.vm.setupAddressLookup =
+//     addressQuestions.methods.setupAddressLookup;
+
+//   return { wrapper, apiPromise };
+// }
\ No newline at end of file
diff --git a/src/layouts/address-lookup/address-lookup.spec.js1 b/src/layouts/address-lookup/address-lookup.spec.js1
deleted file mode 100644
index 4443100c3..000000000
--- a/src/layouts/address-lookup/address-lookup.spec.js1
+++ /dev/null
@@ -1,244 +0,0 @@
-// Components
-import addressLookup from "@/layouts/address-lookup/address-lookup.vue";
-import funnelHeader from "@/common-components/funnel-header/funnel-header";
-import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
-import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
-import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
-import customerQuestions from "@/layouts/address-lookup/customer-questions/customer-questions";
-import addressQuestions from "@/layouts/address-lookup/customer-questions/address-questions/address-questions";
-
-// Supporting Files
-import { settleAllPromises } from "@/helpers/layout-helper.js";
-import baseMixin from "@/mixins/base-mixin";
-import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
-import { mount, flushPromises } from "@vue/test-utils";
-import { getMountOptions } from "@/helpers/unit-test-helper.js";
-import { maska } from 'maska';
-import { nextTick } from "vue";
-import { storeActions } from "@/constants/store-actions";
-import { storeMutations } from "@/constants/store-mutations";
-import store from "@/store";
-import { validate } from "vee-validate";
-
-// Mock our module for promises.
-jest.mock("@/helpers/layout-helper.js", () => ({
-    settleAllPromises: jest.fn(),
-}));
-  
-// Mock fetchCmsContentForPage
-jest.mock("@/helpers/cms-content-helper", () => ({
-    fetchCmsContentForPage: jest.fn(),
-}));
-
-describe("address-lookup.vue", () => {
-    test("Page header is initialized with api data", async (done) => {
-      //Arrange
-      const pageHeaderWidgetHeaderText = "Select Damage";
-      const { wrapper, apiPromise } = setupMocks({
-        pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText,
-      });
-  
-      //Act
-      addressLookup.beforeRouteEnter.call(
-        wrapper.vm,
-        { query: { fmgPage: "address-lookup" } },
-        undefined,
-        (c) => c(wrapper.vm)
-      );
-  
-      //Assert
-      apiPromise.finally(() => {
-        expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith(
-          pageHeaderWidgetHeaderText
-        );        
-        done();
-      });
-    });
-
-    test("Customer Questions component is initialized with api data", async (done) => {
-        //Arrange
-        const StreetAddressQuestionWidget = { QuestionText: "test" };
-        const CityQuestionWidget = { QuestionText: "test" };
-        const StateQuestionWidget = { QuestionText: "test" };
-        const ZipQuestionWidget = { QuestionText: "test" };
-        const FirstNameQuestionWidget = { QuestionText: "test" };
-        const LastNameQuestionWidget = { QuestionText: "test" };
-        const EmailAddressQuestionWidget = { QuestionText: "test" };
-        const AlertVerificationWarningWidget = { HeaderText: "test", BodyText: "test" };
-        const AlertNoMatchWarningWidget = { HeaderText: "test", BodyText: "test" };
-
-        const widgets = [
-            StreetAddressQuestionWidget,
-            CityQuestionWidget,
-            StateQuestionWidget,
-            ZipQuestionWidget,
-            AlertVerificationWarningWidget,
-            AlertNoMatchWarningWidget,
-            FirstNameQuestionWidget,
-            LastNameQuestionWidget,
-            EmailAddressQuestionWidget,
-            ];
-
-        const { wrapper, apiPromise } = setupMocks({
-          cmsContent: widgets,
-        });
-    
-        //Act
-        addressLookup.beforeRouteEnter.call(
-          wrapper.vm,
-          { query: { fmgPage: "address-lookup" } },
-          undefined,
-          (c) => c(wrapper.vm)
-        );
-    
-        //Assert
-        apiPromise.finally(() => {
-          expect(customerQuestions.methods.initializeComponent).toHaveBeenCalledWith(
-            widgets
-          );        
-          done();
-        });
-      });
-
-  });
-
-  
-
-  function setupMocks({
-    pageHeaderWidgetHeaderText = {},
-    mountOptionsMockData = {
-      router: {
-        navigate: jest.fn(),
-      },
-      store: {
-        getters: {
-          vehicle: {},
-        },
-      },
-    },
-  }) {
-    //Mock api responses
-    baseMixin.methods.dispatchStoreAction = jest.fn();
-    const apiResponses = {
-      cmsContent: {
-        FunnelSubHeaderWidget: pageHeaderWidgetHeaderText,
-        VehicleBannerWidget: {
-          GenericVehicleImage:
-            "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
-        },
-        FunnelHeaderWidget: {
-          LogoImage:
-            "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
-        },
-        StreetAddressQuestionWidget: {
-            QuestionText: 
-              "test"
-        },
-        CityQuestionWidget: {
-            QuestionText: 
-              "test"
-        },
-        StateQuestionWidget: {
-            QuestionText: 
-              "test"
-        },
-        ZipQuestionWidget: {
-            QuestionText: 
-              "test"
-        },
-        FirstNameQuestionWidget: {
-            QuestionText: 
-              "test"
-        },
-        LastNameQuestionWidget: {
-            QuestionText: 
-              "test"
-        },
-        EmailAddressQuestionWidget: {
-            QuestionText: 
-              "test"
-        },
-        AlertVerificationWarningWidget: {
-            HeaderText: 
-              "test",
-            BodyText:
-              "test",
-        },
-        AlertNoMatchWarningWidget: {
-            HeaderText: 
-              "test",
-            BodyText:
-              "test",
-        },
-
-      },
-    };
-  
-    const apiPromise = Promise.resolve(apiResponses);
-  
-    settleAllPromises.mockImplementation(() => apiPromise);
-    fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
-  
-    //Mock damage initialize methods
-    funnelHeader.methods = {
-      initializeComponent: jest.fn(),
-    };
-  
-    vehicleBanner.methods = {
-      initializeComponent: jest.fn(),
-    };
-  
-    funnelSubHeader.methods = {
-      initializeComponent: jest.fn(),
-    };
-    
-    funnelFooter.methods = {
-      initializeComponent: jest.fn(),
-    };
-
-    customerQuestions.methods = {
-        initializeComponent: jest.fn(),
-    };
-
-    addressQuestions.methods = {
-      initializeComponent: jest.fn(),
-      setupAddressLookup: jest.fn(),
-    };
-
-    const mountOptions = getMountOptions(mountOptionsMockData);
-    mountOptions['attachTo'] = document.body; // append wrapper to document.body to test DOM methods
-
-    mountOptions.global.directives = {
-        maska: maska
-    };
-
-    const wrapper = mount(addressLookup, mountOptions);
-  
-    const funnelHeaderWrapper = wrapper.findComponent({ name: "funnelHeader" });
-    funnelHeaderWrapper.vm.initializeComponent =
-      funnelHeader.methods.initializeComponent;
-  
-    const vehicleBannerWrapper = wrapper.findComponent({ name: "vehicleBanner" });
-    vehicleBannerWrapper.vm.initializeComponent =
-      vehicleBanner.methods.initializeComponent;
-    
-    const funnelSubHeaderWrapper = wrapper.findComponent({ name: "funnelSubHeader" });
-    funnelSubHeaderWrapper.vm.initializeComponent =
-      funnelSubHeader.methods.initializeComponent;
-    
-    const funnelFooterWrapper = wrapper.findComponent({ name: "funnelFooter" });
-    funnelFooterWrapper.vm.initializeComponent = 
-      funnelFooter.methods.initializeComponent;
-
-    const customerQuestionsWrapper = wrapper.findComponent({ name: "customerQuestions" });
-    customerQuestionsWrapper.vm.initializeComponent = 
-      customerQuestions.methods.initializeComponent;       
-
-    const addressQuestionsWrapper = wrapper.findComponent({ name: "addressQuestions" });
-    addressQuestionsWrapper.vm.initializeComponent = 
-      addressQuestions.methods.initializeComponent;  
-    addressQuestionsWrapper.vm.setupAddressLookup = 
-      addressQuestions.methods.setupAddressLookup;
-
-    return { wrapper, apiPromise };
-  }
\ No newline at end of file
diff --git a/src/layouts/address-lookup/address-lookup.vue b/src/layouts/address-lookup/address-lookup.vue
index f29e3d21a..02946177e 100644
--- a/src/layouts/address-lookup/address-lookup.vue
+++ b/src/layouts/address-lookup/address-lookup.vue
@@ -1,67 +1,101 @@
 <template>
-	<Form
-		@submit="onSubmit"
-		@invalid-submit="onInvalidSubmit"
-		ref="theForm"
-		v-slot="{ meta }"
-		autocomplete="off" >
-		<div class="page-container-grouped-styles">
-			<loadingModal ref="loadingModal"/>
-			<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-			<vehicleBanner cmsWidgetName="VehicleBannerWidget" ref="vehicleBanner" :displayGenericVehicleImage=false />
-			<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" />	
-			<div class="fade-on-route-transition sub-container make-tall">
-				<customerQuestions ref="customerQuestions" v-model="customerQuestions" />
-				<alert ref="alertVinNotFound" v-if="displayVinNotFoundAlert"
-					class="mb-4"
-					cmsWidgetName="AlertVinNotFoundWidget"
-					alertClass="alert-danger"
-					v-bind:isDismissible="false"
-				/>
-				<alert ref="alertMatchedDifferentVehicle" v-if="displayMatchedDifferentVehicleAlert"
-					class="mb-4"
-					:manualHeadline="AlertMatchedDifferentVehicleHeader"
-					:manualCopy="AlertMatchedDifferentVehicleBody"
-					alertClass="alert-warning"
-					v-bind:isDismissible="false"
-				/>			
-				<alert ref="alertNonServiceableZip" v-if="displayNonServiceableZipAlert"
-					class="mb-4"
-					alertClass="alert-danger"
-					:manualHeadline="AlertNonServiceableZipHeader"
-					:manualCopy="AlertNonServiceableZipBody"
-					v-bind:isDismissible="false"
-				/>			
-				<alert ref="alertVinLookupsByHomeAddressNotAllowed" v-if="displayVinLookupByHomeAddressNotAllowedAlert"
-					class="mb-4"
-					cmsWidgetName="AlertVinLookupsByHomeAddressNotAllowedWidget"
-					alertClass="alert-danger"
-					v-bind:isDismissible="false"
-				/>
-				<transition name="fade" mode="out-in">
-					<div class="service-zip-field" v-if="showServiceZipField" aria-live="polite">
-						<div class="row mb-4">
-							<div class="col">
-								<textboxQuestion cmsWidgetName="ServiceZipQuestionWidget" v-model="serviceZipCode" ref="serviceZip" inputId="7add1b26df344f2caf1678de5797803f" aria-haspopup="" mask="#####" disableAutoFill validationRules="service-zip-required|service-zip-format" />
-							</div>
-						</div>
-					</div>
-				</transition>								
-				<funnel-footer
-					cmsWidgetName="FunnelFooterWidget"
-					ref="funnelFooter"
-					:isDisabled="!meta.valid"
-					@ForwardClicked="forwardButtonAction"
-					@back-clicked="backButtonAction"
-					:isForwardActionDisabled="!meta.valid"
-				/>
-			</div>	
-		</div>
-	</Form>
+    <Form
+        @submit="onSubmit"
+        @invalid-submit="onInvalidSubmit"
+        ref="theForm"
+        v-slot="{ meta }"
+        autocomplete="off"
+    >
+        <div class="page-container-grouped-styles">
+            <loadingModal ref="loadingModal" />
+            <funnelHeader
+                cmsWidgetName="FunnelHeaderWidget"
+                ref="funnelHeader"
+            />
+            <vehicleBanner
+                cmsWidgetName="VehicleBannerWidget"
+                ref="vehicleBanner"
+                :displayGenericVehicleImage="false"
+            />
+            <funnelSubHeader
+                cmsWidgetName="FunnelSubHeaderWidget"
+                ref="funnelSubHeader"
+            />
+            <div class="fade-on-route-transition sub-container make-tall">
+                <customerQuestions
+                    ref="customerQuestions"
+                    v-model="customerQuestions"
+                />
+                <alert
+                    ref="alertVinNotFound"
+                    v-if="displayVinNotFoundAlert"
+                    class="mb-4"
+                    cmsWidgetName="AlertVinNotFoundWidget"
+                    alertClass="alert-danger"
+                    v-bind:isDismissible="false"
+                />
+                <alert
+                    ref="alertMatchedDifferentVehicle"
+                    v-if="displayMatchedDifferentVehicleAlert"
+                    class="mb-4"
+                    :manualHeadline="AlertMatchedDifferentVehicleHeader"
+                    :manualCopy="AlertMatchedDifferentVehicleBody"
+                    alertClass="alert-warning"
+                    v-bind:isDismissible="false"
+                />
+                <alert
+                    ref="alertNonServiceableZip"
+                    v-if="displayNonServiceableZipAlert"
+                    class="mb-4"
+                    alertClass="alert-danger"
+                    :manualHeadline="AlertNonServiceableZipHeader"
+                    :manualCopy="AlertNonServiceableZipBody"
+                    v-bind:isDismissible="false"
+                />
+                <alert
+                    ref="alertVinLookupsByHomeAddressNotAllowed"
+                    v-if="displayVinLookupByHomeAddressNotAllowedAlert"
+                    class="mb-4"
+                    cmsWidgetName="AlertVinLookupsByHomeAddressNotAllowedWidget"
+                    alertClass="alert-danger"
+                    v-bind:isDismissible="false"
+                />
+                <transition name="fade" mode="out-in">
+                    <div
+                        class="service-zip-field"
+                        v-if="showServiceZipField"
+                        aria-live="polite"
+                    >
+                        <div class="row mb-4">
+                            <div class="col">
+                                <textboxQuestion
+                                    cmsWidgetName="ServiceZipQuestionWidget"
+                                    v-model="serviceZipCode"
+                                    ref="serviceZip"
+                                    inputId="7add1b26df344f2caf1678de5797803f"
+                                    aria-haspopup=""
+                                    mask="#####"
+                                    disableAutoFill
+                                    validationRules="service-zip-required|service-zip-format"
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </transition>
+                <funnel-footer
+                    cmsWidgetName="FunnelFooterWidget"
+                    ref="funnelFooter"
+                    :isDisabled="!meta.valid"
+                    @ForwardClicked="forwardButtonAction"
+                    @back-clicked="backButtonAction"
+                    :isForwardActionDisabled="!meta.valid"
+                />
+            </div>
+        </div>
+    </Form>
 </template>
 
 <script>
-
 // Components
 import funnelHeader from "@/common-components/funnel-header/funnel-header";
 import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
@@ -70,7 +104,7 @@ import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-he
 import customerQuestions from "@/layouts/address-lookup/customer-questions/customer-questions";
 import alert from "@/ux-components/alert/alert";
 import textboxQuestion from "@/common-components/textbox-question/textbox-question";
-import loadingModal from '@/common-components/loading-modal/loading-modal.vue';
+import loadingModal from "@/common-components/loading-modal/loading-modal.vue";
 
 import { Form, defineRule } from "vee-validate";
 import { required, regex } from "@/helpers/validation-rules";
@@ -84,353 +118,467 @@ import { storeActions } from "@/constants/store-actions";
 import { storeMutations } from "@/constants/store-mutations";
 import baseMixin from "@/mixins/base-mixin";
 import { navigateAfterSaveToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
-import { getDamageString, isGlassAvailableForCarId } from "@/helpers/damage-helper";
+import {
+    getDamageString,
+    isGlassAvailableForCarId,
+} from "@/helpers/damage-helper";
 
-defineRule("service-zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED));
-defineRule("service-zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT));
+defineRule(
+    "service-zip-required",
+    required(errorMessages.SERVICE_ZIP_REQUIRED)
+);
+defineRule(
+    "service-zip-format",
+    regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT)
+);
 
 export default {
-	name: "address-lookup",
-	async beforeRouteEnter(to, from, next) {
-		// Call APIs
-		const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+    name: "address-lookup",
+    async beforeRouteEnter(to, from, next) {
+        // Call APIs
+        const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
 
-		// Settle promises and get results
-		const promiseResultMap = [
-			{
-				resultKey: "cmsContent",
-				promise: cmsContentPromise,
-			},
-		];
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+        ];
 
-		const resultMap = await settleAllPromises(promiseResultMap);
+        const resultMap = await settleAllPromises(promiseResultMap);
 
-		// Call the "next" function to complete the transition to this page.
-		next((vm) => {
-			vm.setCmsContent(resultMap.cmsContent);
-		});
-	},
-	data() {
-		return {
-			customerQuestions: {
-				addressQuestions: {
-					streetAddress: this.getRegistrationAddressFromStore(),
-					city: this.getRegistrationCityFromStore(),
-					state: this.getRegistrationStateFromStore(),
-					zipCode: this.getRegistrationZipFromStore(),
-				},
-				firstName: this.getRegistrationFirstNameFromStore(),
-				lastName: this.getRegistrationLastNameFromStore(),
-				emailAddress: this.getEmailFromStore(),
-			}, 
-			serviceZipCode: this.getServiceZipFromStore(),
-			displayNonServiceableZipAlert: false,
-			displayVinNotFoundAlert: false,
-			displayMatchedDifferentVehicleAlert: false,
-			displayVinLookupByHomeAddressNotAllowedAlert: false,
-			previouslyEnteredCarId: "",
-			isSelectedGlassAvailableForVehicle: false, 
-			customAlertData: {},
-			showServiceZipField: this.getServiceZipFromStore(),
-			isZipServicable: false,
-		}
-	},
-	methods: {
-		arePagePrerequisitesValid() {
-			return store.getters.vehicle.carId !== null;
-		},
-		resetDependentState() {
-			store.commit(storeMutations.UPDATE_REGISTRATION_LICENSE_PLATE, null);
-			store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES);
-		},
-		backButtonAction() {
-			// route to move backwards
-			this.$router.navigate(
-				this.navigationScenarios.CLICKED_BACK,
-				this.$route
-			);
-		},
-		attachCustomEvents() { 
-       this.prependActionToMethod(this, this.forwardButtonAction, () => {
-      this.pushEventToGA(
-          this.$route.query[this.queryStrings.FMG_PAGE],
-          this.GaActions.SUBMITTED,
-          this.GaLabels.ADDRESS_LOOKUP,
-          true
-     );
-      });
-	},
-		getRegistrationAddressFromStore() {
-			return store.getters.vehicle.registration.address;
-		},
-		getRegistrationCityFromStore() {
-			return store.getters.vehicle.registration.city;
-		},
-		getRegistrationStateFromStore() {
-			return store.getters.vehicle.registration.state;
-		},
-		getRegistrationZipFromStore() {
-			return store.getters.vehicle.registration.zipCode;
-		},
-		getRegistrationFirstNameFromStore() {
-			return store.getters.vehicle.registration.firstName;
-		},
-		getRegistrationLastNameFromStore() {
-			return store.getters.vehicle.registration.lastName;
-		},						
-		getEmailFromStore() {
-			return store.getters.order.customer.emailAddress;
-		},
-		getServiceZipFromStore() {
-			return store.getters.order.serviceLocation.zipCode;
-		},
-		async forwardButtonAction() {
-			this.resetWarningsAndErrors();
+        // Call the "next" function to complete the transition to this page.
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
+    },
+    data() {
+        return {
+            customerQuestions: {
+                addressQuestions: {
+                    streetAddress: this.getRegistrationAddressFromStore(),
+                    city: this.getRegistrationCityFromStore(),
+                    state: this.getRegistrationStateFromStore(),
+                    zipCode: this.getRegistrationZipFromStore(),
+                },
+                firstName: this.getRegistrationFirstNameFromStore(),
+                lastName: this.getRegistrationLastNameFromStore(),
+                emailAddress: this.getEmailFromStore(),
+            },
+            serviceZipCode: this.getServiceZipFromStore(),
+            displayNonServiceableZipAlert: false,
+            displayVinNotFoundAlert: false,
+            displayMatchedDifferentVehicleAlert: false,
+            displayVinLookupByHomeAddressNotAllowedAlert: false,
+            previouslyEnteredCarId: "",
+            isSelectedGlassAvailableForVehicle: false,
+            customAlertData: {},
+            showServiceZipField: this.getServiceZipFromStore(),
+            isZipServicable: false,
+        };
+    },
+    methods: {
+        arePagePrerequisitesValid() {
+            return store.getters.vehicle.carId !== null;
+        },
+        resetDependentState() {
+            store.commit(
+                storeMutations.UPDATE_REGISTRATION_LICENSE_PLATE,
+                null
+            );
+            store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES);
+        },
+        backButtonAction() {
+            // route to move backwards
+            this.$router.navigate(
+                this.navigationScenarios.CLICKED_BACK,
+                this.$route
+            );
+        },
+        attachCustomEvents() {
+            this.prependActionToMethod(this, this.forwardButtonAction, () => {
+                this.pushEventToGA(
+                    this.$route.query[this.queryStrings.FMG_PAGE],
+                    this.GaActions.SUBMITTED,
+                    this.GaLabels.ADDRESS_LOOKUP,
+                    true
+                );
+            });
+        },
+        getRegistrationAddressFromStore() {
+            return store.getters.vehicle.registration.address;
+        },
+        getRegistrationCityFromStore() {
+            return store.getters.vehicle.registration.city;
+        },
+        getRegistrationStateFromStore() {
+            return store.getters.vehicle.registration.state;
+        },
+        getRegistrationZipFromStore() {
+            return store.getters.vehicle.registration.zipCode;
+        },
+        getRegistrationFirstNameFromStore() {
+            return store.getters.vehicle.registration.firstName;
+        },
+        getRegistrationLastNameFromStore() {
+            return store.getters.vehicle.registration.lastName;
+        },
+        getEmailFromStore() {
+            return store.getters.order.customer.emailAddress;
+        },
+        getServiceZipFromStore() {
+            return store.getters.order.serviceLocation.zipCode;
+        },
+        async forwardButtonAction() {
+            this.resetWarningsAndErrors();
 
-			// Lookup VIN(s) with the provided address
-			const vinLookupPromise = this.lookupVin(
-				this.customerQuestions.lastName, 
-				this.customerQuestions.addressQuestions.streetAddress, 
-				this.customerQuestions.addressQuestions.zipCode, 
-				this.customerQuestions.addressQuestions.state
-			);
+            // Lookup VIN(s) with the provided address
+            const vinLookupPromise = this.lookupVin(
+                this.customerQuestions.lastName,
+                this.customerQuestions.addressQuestions.streetAddress,
+                this.customerQuestions.addressQuestions.zipCode,
+                this.customerQuestions.addressQuestions.state
+            );
 
-			// Verify if the service zip code or registration zip code provided is serviceable
-			const serviceZipValidationPromise = this.serviceZipCode ? this.validateZip(this.serviceZipCode) : this.validateZip(this.customerQuestions.addressQuestions.zipCode);
+            // Verify if the service zip code or registration zip code provided is serviceable
+            const serviceZipValidationPromise = this.serviceZipCode
+                ? this.validateZip(this.serviceZipCode)
+                : this.validateZip(
+                      this.customerQuestions.addressQuestions.zipCode
+                  );
 
-			const vinLookupResponse = await vinLookupPromise;
-			const serviceZipValidationResponse = await serviceZipValidationPromise;
-			
-			if (!vinLookupResponse.data.isStatePermissible) {				
-				// State Restrictions forbid lookup by address
-				this.displayVinLookupByHomeAddressNotAllowedAlert = true;
-				this.$refs.funnelFooter.removeLoader();
-				return;
-			}
-			
-			// if the neither the registration zip code or service zip code are not serviceable
-			this.isZipServicable = serviceZipValidationResponse.data.isServiceable;
-			if (!this.isZipServicable) {				
-				this.displayNonServiceableZipAlert = true;
-				this.showServiceZipField = true;
-				this.$refs.funnelFooter.removeLoader();		
-			} else if (!this.serviceZipCode) {
-				// if the registration zip code is servicable and nothing was entered for the service zip code
-				// then set the service zip code to the registration zip code
-				this.serviceZipCode = this.customerQuestions.addressQuestions.zipCode;
-			} 
+            const vinLookupResponse = await vinLookupPromise;
+            const serviceZipValidationResponse =
+                await serviceZipValidationPromise;
 
-			const carEntered = store.getters.vehicle;
-			const carsFound = vinLookupResponse.data.vinVehicles;
+            if (!vinLookupResponse.data.isStatePermissible) {
+                // State Restrictions forbid lookup by address
+                this.displayVinLookupByHomeAddressNotAllowedAlert = true;
+                this.$refs.funnelFooter.removeLoader();
+                return;
+            }
 
-			if (carsFound.length == 0) {
-				// No VINs found					
-				this.displayVinNotFoundAlert = true;
-				this.$refs.funnelFooter.removeLoader();
-				return;				
-			} else if (carsFound.length == 1) {			
-				const carFound = carsFound[0].vehicle;
-				this.isCarIdDifferent = carFound.carId !== carEntered.carId;
+            // if the neither the registration zip code or service zip code are not serviceable
+            this.isZipServicable =
+                serviceZipValidationResponse.data.isServiceable;
+            if (!this.isZipServicable) {
+                this.displayNonServiceableZipAlert = true;
+                this.showServiceZipField = true;
+                this.$refs.funnelFooter.removeLoader();
+            } else if (!this.serviceZipCode) {
+                // if the registration zip code is servicable and nothing was entered for the service zip code
+                // then set the service zip code to the registration zip code
+                this.serviceZipCode =
+                    this.customerQuestions.addressQuestions.zipCode;
+            }
 
-				if (this.isCarIdDifferent && carFound.carId !== this.previouslyEnteredCarId) {	
-					// Display Alert
-					this.previouslyEnteredCarId = carFound.carId;
-					this.customAlertData.vehicleInfo = carFound;
-					this.displayMatchedDifferentVehicleAlert = true;
+            const carEntered = store.getters.vehicle;
+            const carsFound = vinLookupResponse.data.vinVehicles;
 
-					this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(carFound.carId);
+            if (carsFound.length == 0) {
+                // No VINs found
+                this.displayVinNotFoundAlert = true;
+                this.$refs.funnelFooter.removeLoader();
+                return;
+            } else if (carsFound.length == 1) {
+                const carFound = carsFound[0].vehicle;
+                this.isCarIdDifferent = carFound.carId !== carEntered.carId;
 
-					// Update button "Continue with..."
-					this.$refs.funnelFooter.updateButtonText(`Continue with ${carFound.year} ${carFound.make} ${carFound.model}`);				
-					this.$refs.funnelFooter.removeLoader();
-					
-					return;
-				} 				
-								
-				if (!this.isZipServicable) {
-					return;
-				}
+                if (
+                    this.isCarIdDifferent &&
+                    carFound.carId !== this.previouslyEnteredCarId
+                ) {
+                    // Display Alert
+                    this.previouslyEnteredCarId = carFound.carId;
+                    this.customAlertData.vehicleInfo = carFound;
+                    this.displayMatchedDifferentVehicleAlert = true;
 
-				// update data if the zip or service zip is servicable
-				this.updateVehicleInfo(carsFound[0].vin, carFound);
-				this.updateCustomerInfo(serviceZipValidationResponse.data.state);
-	
-			} else if (carsFound.length > 1) {
-				if (!this.isZipServicable) {
-					return;
-				}
+                    this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(carFound.carId);
 
-				// if multiple cars were found
-				let matchingCars = carsFound.filter(car => car.vehicle.carId === carEntered.carId); 
-				if (matchingCars.length === 1) {
-					// and one and only one of them matches the carId entered, save the vehicle info
-					// so we can go to the Heritage Funnel directly
-					const matchingCar = matchingCars[0];
-					this.updateVehicleInfo(matchingCar.vin, matchingCar.vehicle);
-				}
-				
-				// update data if the zip or service zip is servicable
-				this.updateCustomerInfo(serviceZipValidationResponse.data.state);
-			}
+                    // Update button "Continue with..."
+                    this.$refs.funnelFooter.updateButtonText(
+                        `Continue with ${carFound.year} ${carFound.make} ${carFound.model}`
+                    );
+                    this.$refs.funnelFooter.removeLoader();
 
-			this.navigateForward(carEntered, carsFound);
-		},
-		resetWarningsAndErrors() {
-			this.displayVinNotFoundAlert = false;
-			this.displayNonServiceableZipAlert = false;	
-			this.displayMatchedDifferentVehicleAlert = false;
-			this.displayVinLookupByHomeAddressNotAllowedAlert = false;
-		},
-		navigateForward(carEntered, carsFound) {
-			this.updateServiceLocationIfNecessary();
-			
-			if (carsFound.length == 1) {
-				// if a different vehicle is found than the one entered and the selected glass
-				// is not available for that vehicle
-				if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {
-					this.$router.navigateAfterSave(
-						// then navigate back to "vehicle-damage", and display vehicle changed alert
-						// on that page
-						this.navigationScenarios.CONTINUING_WITH_DIFFERENT_GLASS,
-						this.$route, {}, {
-							displayVehicleChangeAlert: true
-						}, {}
-					);
-				} else {
-					// otherwise 
-					this.$refs.loadingModal.showModal();
-					navigateAfterSaveToHeritageFunnel(this.$route);
-				}				
-			} else if (carsFound.length > 1) {
-				// if multiple cars were found
-				let matchingCars = carsFound.filter(car => car.vehicle.carId === carEntered.carId);  
-				if (matchingCars.length === 1) {
-					this.$refs.loadingModal.showModal();
+                    return;
+                }
 
-					// and one and only of them matches the car id entered
-					const matchingCar = matchingCars[0];					
-					this.updateVehicleInfo(matchingCar.vin, matchingCar.vehicle);
-					navigateAfterSaveToHeritageFunnel(this.$route);
-				} else {
-					// if there are no matches or there are multiple matches, navigate to "address-vehicles" page
-					this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_MULTIPLE_VEHICLES, this.$route, {}, {}, carsFound);
-				}
-			} 
+                if (!this.isZipServicable) {
+                    return;
+                }
 
-		},
-		validateZip(zip) {
-			return baseMixin.methods.dispatchStoreAction(
-				storeActions.VALIDATE_ZIP, 
-				{ zip });
-		},
-		lookupVin(lastName, streetAddress, zip, state) {
-			return baseMixin.methods.dispatchStoreAction(
-				storeActions.LOOKUP_VIN_BY_ADDRESS,
-				{ 
-					licenseLastName: lastName, 
-					licenseStreetAddress: streetAddress, 
-					licenseZip: zip, 
-					licenseState: state 
-				}, false
-			);
-		},
-		updateVehicleInfo(vin, vehicleInfo) {
-			store.commit(storeMutations.UPDATE_VEHICLE_VIN, vin);
-			store.commit(storeMutations.UPDATE_YEAR, vehicleInfo.year);
-			store.commit(storeMutations.UPDATE_MAKE, vehicleInfo.make);
-			store.commit(storeMutations.UPDATE_MODEL, vehicleInfo.model);
-			store.commit(storeMutations.UPDATE_STYLE, vehicleInfo.style);
-			store.commit(storeMutations.UPDATE_CAR_ID, vehicleInfo.carId);
-			store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, vehicleInfo.category);
-			store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, vehicleInfo.imageUrl);
-			store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, vehicleInfo.imageVifNumber);
-			store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, vehicleInfo.imageColor);
-		},		
-		updateCustomerInfo(serviceState) {
-			store.commit(storeMutations.UPDATE_REGISTRATION_ADDRESS, this.customerQuestions.addressQuestions.streetAddress);
-			store.commit(storeMutations.UPDATE_REGISTRATION_CITY, this.customerQuestions.addressQuestions.city);
-			store.commit(storeMutations.UPDATE_REGISTRATION_STATE, this.customerQuestions.addressQuestions.state);
-			store.commit(storeMutations.UPDATE_REGISTRATION_ZIP_CODE, this.customerQuestions.addressQuestions.zipCode);
-			store.commit(storeMutations.UPDATE_REGISTRATION_FIRST_NAME, this.customerQuestions.firstName);
-			store.commit(storeMutations.UPDATE_REGISTRATION_LAST_NAME, this.customerQuestions.lastName);
-			store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP_CODE, this.serviceZipCode);			
-			store.commit(storeMutations.UPDATE_SERVICE_LOCATION_STATE, serviceState);			
-			store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, this.customerQuestions.emailAddress);
-		},		
-		updateServiceLocationIfNecessary() {
-			const serviceLocation = store.getters.order.serviceLocation;
+                // update data if the zip or service zip is servicable
+                this.updateVehicleInfo(carsFound[0].vin, carFound);
+                this.updateCustomerInfo(
+                    serviceZipValidationResponse.data.state
+                );
+            } else if (carsFound.length > 1) {
+                if (!this.isZipServicable) {
+                    return;
+                }
 
-			if (!serviceLocation.address && serviceLocation.zipCode && serviceLocation.zipCode == store.getters.vehicle.registration.zipCode) {
-				baseMixin.methods.dispatchStoreAction(
-					storeActions.UPDATE_SERVICE_LOCATION_WITH_VEHICLE_REGISTRATION
-				);
-			}
-		}
-	},
-	mounted() {
-    this.attachCustomEvents();
-  },
-	computed: {
-		AlertNonServiceableZipHeader(){
-			const zipCode = this.serviceZipCode ? this.serviceZipCode : this.customerQuestions.addressQuestions.zipCode;
-			const text = this.getCmsContent("AlertNonServiceableZipWidget", "HeadlineText").replaceAll("{custom:serviceZip}", zipCode);
-			return text;
-		},
-		AlertNonServiceableZipBody(){
-			return this.getCmsContent("AlertNonServiceableZipWidget", "BodyText");
-		},		
-		AlertMatchedDifferentVehicleHeader(){
-			const text = this.getCmsContent("AlertMatchedDifferentVehicleWidget", "HeadlineText").replaceAll("{custom:glassText}", getDamageString());
-			return text;
-		},
-		AlertMatchedDifferentVehicleBody(){
+                // if multiple cars were found
+                let matchingCars = carsFound.filter(
+                    (car) => car.vehicle.carId === carEntered.carId
+                );
+                if (matchingCars.length === 1) {
+                    // and one and only one of them matches the carId entered, save the vehicle info
+                    // so we can go to the Heritage Funnel directly
+                    const matchingCar = matchingCars[0];
+                    this.updateVehicleInfo(
+                        matchingCar.vin,
+                        matchingCar.vehicle
+                    );
+                }
 
-			const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
-			const vinYmmExpected = `${store.getters.vehicle.year} ${store.getters.vehicle.make} ${store.getters.vehicle.model}`;
+                // update data if the zip or service zip is servicable
+                this.updateCustomerInfo(
+                    serviceZipValidationResponse.data.state
+                );
+            }
 
-			const content = this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText")
-				.replaceAll("{custom:glassText}", getDamageString())
-				.replaceAll("{custom:vinYmmFound}", vinYmmFound)
-				.replaceAll("{custom:vinYmmExpected}", vinYmmExpected);			
+            this.navigateForward(carEntered, carsFound);
+        },
+        resetWarningsAndErrors() {
+            this.displayVinNotFoundAlert = false;
+            this.displayNonServiceableZipAlert = false;
+            this.displayMatchedDifferentVehicleAlert = false;
+            this.displayVinLookupByHomeAddressNotAllowedAlert = false;
+        },
+        navigateForward(carEntered, carsFound) {
+            this.updateServiceLocationIfNecessary();
 
-			return content;
-		},		
-	},
-	watch: {
-		customerQuestions: {		
-			handler(newValue) {
-				// if they modify one of the lookup fields (address, city, state, zipCode, or lastName), then modify the button text back to “Get my personalized quote”
-				this.$refs.funnelFooter.updateButtonText(this.getCmsContent("FunnelFooterWidget", "ForwardButtonText"));
-				this.showServiceZipField = false;
-				this.resetWarningsAndErrors();
-			},
-			deep: true
-		},
-		serviceZipCode: {
-			handler(newValue) {
-				// if they modify the service zip code, then hide the error message”
-				this.displayNonServiceableZipAlert = false;
-			},
-		},
-		showServiceZipField: {
-			handler(newValue) {
-				// if the Service Zip Code field is ever hidden, clear out it's value
-				if (!newValue) {
-					this.serviceZipCode = null;
-				}			
-			},			
-		}
-	},
-	components: {
-		funnelHeader,
-		funnelFooter,
-		vehicleBanner,
-		funnelSubHeader,
-		customerQuestions,
-		textboxQuestion,
-		alert,
-		loadingModal,
-		Form
-	},
+            if (carsFound.length == 1) {
+                // if a different vehicle is found than the one entered and the selected glass
+                // is not available for that vehicle
+                if (
+                    this.isCarIdDifferent &&
+                    !this.isSelectedGlassAvailableForVehicle
+                ) {
+                    this.$router.navigateAfterSave(
+                        // then navigate back to "vehicle-damage", and display vehicle changed alert
+                        // on that page
+                        this.navigationScenarios
+                            .CONTINUING_WITH_DIFFERENT_GLASS,
+                        this.$route,
+                        {},
+                        {
+                            displayVehicleChangeAlert: true,
+                        },
+                        {}
+                    );
+                } else {
+                    // otherwise
+                    this.$refs.loadingModal.showModal();
+                    navigateAfterSaveToHeritageFunnel(this.$route);
+                }
+            } else if (carsFound.length > 1) {
+                // if multiple cars were found
+                let matchingCars = carsFound.filter(
+                    (car) => car.vehicle.carId === carEntered.carId
+                );
+                if (matchingCars.length === 1) {
+                    this.$refs.loadingModal.showModal();
+
+                    // and one and only of them matches the car id entered
+                    const matchingCar = matchingCars[0];
+                    this.updateVehicleInfo(
+                        matchingCar.vin,
+                        matchingCar.vehicle
+                    );
+                    navigateAfterSaveToHeritageFunnel(this.$route);
+                } else {
+                    // if there are no matches or there are multiple matches, navigate to "address-vehicles" page
+                    this.$router.navigateAfterSave(
+                        this.navigationScenarios
+                            .CONTINUING_WITH_MULTIPLE_VEHICLES,
+                        this.$route,
+                        {},
+                        {},
+                        carsFound
+                    );
+                }
+            }
+        },
+        validateZip(zip) {
+            return baseMixin.methods.dispatchStoreAction(
+                storeActions.VALIDATE_ZIP,
+                { zip }
+            );
+        },
+        lookupVin(lastName, streetAddress, zip, state) {
+            return baseMixin.methods.dispatchStoreAction(
+                storeActions.LOOKUP_VIN_BY_ADDRESS,
+                {
+                    licenseLastName: lastName,
+                    licenseStreetAddress: streetAddress,
+                    licenseZip: zip,
+                    licenseState: state,
+                },
+                false
+            );
+        },
+        updateVehicleInfo(vin, vehicleInfo) {
+            store.commit(storeMutations.UPDATE_VEHICLE_VIN, vin);
+            store.commit(storeMutations.UPDATE_YEAR, vehicleInfo.year);
+            store.commit(storeMutations.UPDATE_MAKE, vehicleInfo.make);
+            store.commit(storeMutations.UPDATE_MODEL, vehicleInfo.model);
+            store.commit(storeMutations.UPDATE_STYLE, vehicleInfo.style);
+            store.commit(storeMutations.UPDATE_CAR_ID, vehicleInfo.carId);
+            store.commit(
+                storeMutations.UPDATE_VEHICLE_CATEGORY,
+                vehicleInfo.category
+            );
+            store.commit(
+                storeMutations.UPDATE_VEHICLE_IMAGE_URL,
+                vehicleInfo.imageUrl
+            );
+            store.commit(
+                storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER,
+                vehicleInfo.imageVifNumber
+            );
+            store.commit(
+                storeMutations.UPDATE_VEHICLE_IMAGE_COLOR,
+                vehicleInfo.imageColor
+            );
+        },
+        updateCustomerInfo(serviceState) {
+            store.commit(
+                storeMutations.UPDATE_REGISTRATION_ADDRESS,
+                this.customerQuestions.addressQuestions.streetAddress
+            );
+            store.commit(
+                storeMutations.UPDATE_REGISTRATION_CITY,
+                this.customerQuestions.addressQuestions.city
+            );
+            store.commit(
+                storeMutations.UPDATE_REGISTRATION_STATE,
+                this.customerQuestions.addressQuestions.state
+            );
+            store.commit(
+                storeMutations.UPDATE_REGISTRATION_ZIP_CODE,
+                this.customerQuestions.addressQuestions.zipCode
+            );
+            store.commit(
+                storeMutations.UPDATE_REGISTRATION_FIRST_NAME,
+                this.customerQuestions.firstName
+            );
+            store.commit(
+                storeMutations.UPDATE_REGISTRATION_LAST_NAME,
+                this.customerQuestions.lastName
+            );
+            store.commit(
+                storeMutations.UPDATE_SERVICE_LOCATION_ZIP_CODE,
+                this.serviceZipCode
+            );
+            store.commit(
+                storeMutations.UPDATE_SERVICE_LOCATION_STATE,
+                serviceState
+            );
+            store.commit(
+                storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS,
+                this.customerQuestions.emailAddress
+            );
+        },
+        updateServiceLocationIfNecessary() {
+            const serviceLocation = store.getters.order.serviceLocation;
+
+            if (
+                !serviceLocation.address &&
+                serviceLocation.zipCode &&
+                serviceLocation.zipCode ==
+                    store.getters.vehicle.registration.zipCode
+            ) {
+                baseMixin.methods.dispatchStoreAction(
+                    storeActions.UPDATE_SERVICE_LOCATION_WITH_VEHICLE_REGISTRATION
+                );
+            }
+        },
+    },
+    mounted() {
+        this.attachCustomEvents();
+    },
+    computed: {
+        AlertNonServiceableZipHeader() {
+            const zipCode = this.serviceZipCode
+                ? this.serviceZipCode
+                : this.customerQuestions.addressQuestions.zipCode;
+            const text = this.getCmsContent(
+                "AlertNonServiceableZipWidget",
+                "HeadlineText"
+            ).replaceAll("{custom:serviceZip}", zipCode);
+            return text;
+        },
+        AlertNonServiceableZipBody() {
+            return this.getCmsContent(
+                "AlertNonServiceableZipWidget",
+                "BodyText"
+            );
+        },
+        AlertMatchedDifferentVehicleHeader() {
+            const text = this.getCmsContent(
+                "AlertMatchedDifferentVehicleWidget",
+                "HeadlineText"
+            ).replaceAll("{custom:glassText}", getDamageString());
+            return text;
+        },
+        AlertMatchedDifferentVehicleBody() {
+            const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
+            const vinYmmExpected = `${store.getters.vehicle.year} ${store.getters.vehicle.make} ${store.getters.vehicle.model}`;
+
+            const content = this.getCmsContent(
+                "AlertMatchedDifferentVehicleWidget",
+                "BodyText"
+            )
+                .replaceAll("{custom:glassText}", getDamageString())
+                .replaceAll("{custom:vinYmmFound}", vinYmmFound)
+                .replaceAll("{custom:vinYmmExpected}", vinYmmExpected);
+
+            return content;
+        },
+    },
+    watch: {
+        customerQuestions: {
+            handler(newValue) {
+                // if they modify one of the lookup fields (address, city, state, zipCode, or lastName), then modify the button text back to “Get my personalized quote”
+                this.$refs.funnelFooter.updateButtonText(
+                    this.getCmsContent(
+                        "FunnelFooterWidget",
+                        "ForwardButtonText"
+                    )
+                );
+                this.showServiceZipField = false;
+                this.resetWarningsAndErrors();
+            },
+            deep: true,
+        },
+        serviceZipCode: {
+            handler(newValue) {
+                // if they modify the service zip code, then hide the error message”
+                this.displayNonServiceableZipAlert = false;
+            },
+        },
+        showServiceZipField: {
+            handler(newValue) {
+                // if the Service Zip Code field is ever hidden, clear out it's value
+                if (!newValue) {
+                    this.serviceZipCode = null;
+                }
+            },
+        },
+    },
+    components: {
+        funnelHeader,
+        funnelFooter,
+        vehicleBanner,
+        funnelSubHeader,
+        customerQuestions,
+        textboxQuestion,
+        alert,
+        loadingModal,
+        Form,
+    },
 };
 </script>

From 10c01777199304b526d28262116630e41a3f5728 Mon Sep 17 00:00:00 2001
From: Katie <katie.oh@safelite.com>
Date: Fri, 27 May 2022 17:07:30 -0400
Subject: [PATCH 16/32] CSR-416 Unformat address-lookup.vue

---
 src/layouts/address-lookup/address-lookup.vue | 920 ++++++++----------
 1 file changed, 386 insertions(+), 534 deletions(-)

diff --git a/src/layouts/address-lookup/address-lookup.vue b/src/layouts/address-lookup/address-lookup.vue
index 02946177e..f29e3d21a 100644
--- a/src/layouts/address-lookup/address-lookup.vue
+++ b/src/layouts/address-lookup/address-lookup.vue
@@ -1,101 +1,67 @@
 <template>
-    <Form
-        @submit="onSubmit"
-        @invalid-submit="onInvalidSubmit"
-        ref="theForm"
-        v-slot="{ meta }"
-        autocomplete="off"
-    >
-        <div class="page-container-grouped-styles">
-            <loadingModal ref="loadingModal" />
-            <funnelHeader
-                cmsWidgetName="FunnelHeaderWidget"
-                ref="funnelHeader"
-            />
-            <vehicleBanner
-                cmsWidgetName="VehicleBannerWidget"
-                ref="vehicleBanner"
-                :displayGenericVehicleImage="false"
-            />
-            <funnelSubHeader
-                cmsWidgetName="FunnelSubHeaderWidget"
-                ref="funnelSubHeader"
-            />
-            <div class="fade-on-route-transition sub-container make-tall">
-                <customerQuestions
-                    ref="customerQuestions"
-                    v-model="customerQuestions"
-                />
-                <alert
-                    ref="alertVinNotFound"
-                    v-if="displayVinNotFoundAlert"
-                    class="mb-4"
-                    cmsWidgetName="AlertVinNotFoundWidget"
-                    alertClass="alert-danger"
-                    v-bind:isDismissible="false"
-                />
-                <alert
-                    ref="alertMatchedDifferentVehicle"
-                    v-if="displayMatchedDifferentVehicleAlert"
-                    class="mb-4"
-                    :manualHeadline="AlertMatchedDifferentVehicleHeader"
-                    :manualCopy="AlertMatchedDifferentVehicleBody"
-                    alertClass="alert-warning"
-                    v-bind:isDismissible="false"
-                />
-                <alert
-                    ref="alertNonServiceableZip"
-                    v-if="displayNonServiceableZipAlert"
-                    class="mb-4"
-                    alertClass="alert-danger"
-                    :manualHeadline="AlertNonServiceableZipHeader"
-                    :manualCopy="AlertNonServiceableZipBody"
-                    v-bind:isDismissible="false"
-                />
-                <alert
-                    ref="alertVinLookupsByHomeAddressNotAllowed"
-                    v-if="displayVinLookupByHomeAddressNotAllowedAlert"
-                    class="mb-4"
-                    cmsWidgetName="AlertVinLookupsByHomeAddressNotAllowedWidget"
-                    alertClass="alert-danger"
-                    v-bind:isDismissible="false"
-                />
-                <transition name="fade" mode="out-in">
-                    <div
-                        class="service-zip-field"
-                        v-if="showServiceZipField"
-                        aria-live="polite"
-                    >
-                        <div class="row mb-4">
-                            <div class="col">
-                                <textboxQuestion
-                                    cmsWidgetName="ServiceZipQuestionWidget"
-                                    v-model="serviceZipCode"
-                                    ref="serviceZip"
-                                    inputId="7add1b26df344f2caf1678de5797803f"
-                                    aria-haspopup=""
-                                    mask="#####"
-                                    disableAutoFill
-                                    validationRules="service-zip-required|service-zip-format"
-                                />
-                            </div>
-                        </div>
-                    </div>
-                </transition>
-                <funnel-footer
-                    cmsWidgetName="FunnelFooterWidget"
-                    ref="funnelFooter"
-                    :isDisabled="!meta.valid"
-                    @ForwardClicked="forwardButtonAction"
-                    @back-clicked="backButtonAction"
-                    :isForwardActionDisabled="!meta.valid"
-                />
-            </div>
-        </div>
-    </Form>
+	<Form
+		@submit="onSubmit"
+		@invalid-submit="onInvalidSubmit"
+		ref="theForm"
+		v-slot="{ meta }"
+		autocomplete="off" >
+		<div class="page-container-grouped-styles">
+			<loadingModal ref="loadingModal"/>
+			<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+			<vehicleBanner cmsWidgetName="VehicleBannerWidget" ref="vehicleBanner" :displayGenericVehicleImage=false />
+			<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" />	
+			<div class="fade-on-route-transition sub-container make-tall">
+				<customerQuestions ref="customerQuestions" v-model="customerQuestions" />
+				<alert ref="alertVinNotFound" v-if="displayVinNotFoundAlert"
+					class="mb-4"
+					cmsWidgetName="AlertVinNotFoundWidget"
+					alertClass="alert-danger"
+					v-bind:isDismissible="false"
+				/>
+				<alert ref="alertMatchedDifferentVehicle" v-if="displayMatchedDifferentVehicleAlert"
+					class="mb-4"
+					:manualHeadline="AlertMatchedDifferentVehicleHeader"
+					:manualCopy="AlertMatchedDifferentVehicleBody"
+					alertClass="alert-warning"
+					v-bind:isDismissible="false"
+				/>			
+				<alert ref="alertNonServiceableZip" v-if="displayNonServiceableZipAlert"
+					class="mb-4"
+					alertClass="alert-danger"
+					:manualHeadline="AlertNonServiceableZipHeader"
+					:manualCopy="AlertNonServiceableZipBody"
+					v-bind:isDismissible="false"
+				/>			
+				<alert ref="alertVinLookupsByHomeAddressNotAllowed" v-if="displayVinLookupByHomeAddressNotAllowedAlert"
+					class="mb-4"
+					cmsWidgetName="AlertVinLookupsByHomeAddressNotAllowedWidget"
+					alertClass="alert-danger"
+					v-bind:isDismissible="false"
+				/>
+				<transition name="fade" mode="out-in">
+					<div class="service-zip-field" v-if="showServiceZipField" aria-live="polite">
+						<div class="row mb-4">
+							<div class="col">
+								<textboxQuestion cmsWidgetName="ServiceZipQuestionWidget" v-model="serviceZipCode" ref="serviceZip" inputId="7add1b26df344f2caf1678de5797803f" aria-haspopup="" mask="#####" disableAutoFill validationRules="service-zip-required|service-zip-format" />
+							</div>
+						</div>
+					</div>
+				</transition>								
+				<funnel-footer
+					cmsWidgetName="FunnelFooterWidget"
+					ref="funnelFooter"
+					:isDisabled="!meta.valid"
+					@ForwardClicked="forwardButtonAction"
+					@back-clicked="backButtonAction"
+					:isForwardActionDisabled="!meta.valid"
+				/>
+			</div>	
+		</div>
+	</Form>
 </template>
 
 <script>
+
 // Components
 import funnelHeader from "@/common-components/funnel-header/funnel-header";
 import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
@@ -104,7 +70,7 @@ import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-he
 import customerQuestions from "@/layouts/address-lookup/customer-questions/customer-questions";
 import alert from "@/ux-components/alert/alert";
 import textboxQuestion from "@/common-components/textbox-question/textbox-question";
-import loadingModal from "@/common-components/loading-modal/loading-modal.vue";
+import loadingModal from '@/common-components/loading-modal/loading-modal.vue';
 
 import { Form, defineRule } from "vee-validate";
 import { required, regex } from "@/helpers/validation-rules";
@@ -118,467 +84,353 @@ import { storeActions } from "@/constants/store-actions";
 import { storeMutations } from "@/constants/store-mutations";
 import baseMixin from "@/mixins/base-mixin";
 import { navigateAfterSaveToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
-import {
-    getDamageString,
-    isGlassAvailableForCarId,
-} from "@/helpers/damage-helper";
+import { getDamageString, isGlassAvailableForCarId } from "@/helpers/damage-helper";
 
-defineRule(
-    "service-zip-required",
-    required(errorMessages.SERVICE_ZIP_REQUIRED)
-);
-defineRule(
-    "service-zip-format",
-    regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT)
-);
+defineRule("service-zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED));
+defineRule("service-zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT));
 
 export default {
-    name: "address-lookup",
-    async beforeRouteEnter(to, from, next) {
-        // Call APIs
-        const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+	name: "address-lookup",
+	async beforeRouteEnter(to, from, next) {
+		// Call APIs
+		const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
 
-        // Settle promises and get results
-        const promiseResultMap = [
-            {
-                resultKey: "cmsContent",
-                promise: cmsContentPromise,
-            },
-        ];
+		// Settle promises and get results
+		const promiseResultMap = [
+			{
+				resultKey: "cmsContent",
+				promise: cmsContentPromise,
+			},
+		];
 
-        const resultMap = await settleAllPromises(promiseResultMap);
+		const resultMap = await settleAllPromises(promiseResultMap);
 
-        // Call the "next" function to complete the transition to this page.
-        next((vm) => {
-            vm.setCmsContent(resultMap.cmsContent);
-        });
-    },
-    data() {
-        return {
-            customerQuestions: {
-                addressQuestions: {
-                    streetAddress: this.getRegistrationAddressFromStore(),
-                    city: this.getRegistrationCityFromStore(),
-                    state: this.getRegistrationStateFromStore(),
-                    zipCode: this.getRegistrationZipFromStore(),
-                },
-                firstName: this.getRegistrationFirstNameFromStore(),
-                lastName: this.getRegistrationLastNameFromStore(),
-                emailAddress: this.getEmailFromStore(),
-            },
-            serviceZipCode: this.getServiceZipFromStore(),
-            displayNonServiceableZipAlert: false,
-            displayVinNotFoundAlert: false,
-            displayMatchedDifferentVehicleAlert: false,
-            displayVinLookupByHomeAddressNotAllowedAlert: false,
-            previouslyEnteredCarId: "",
-            isSelectedGlassAvailableForVehicle: false,
-            customAlertData: {},
-            showServiceZipField: this.getServiceZipFromStore(),
-            isZipServicable: false,
-        };
-    },
-    methods: {
-        arePagePrerequisitesValid() {
-            return store.getters.vehicle.carId !== null;
-        },
-        resetDependentState() {
-            store.commit(
-                storeMutations.UPDATE_REGISTRATION_LICENSE_PLATE,
-                null
-            );
-            store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES);
-        },
-        backButtonAction() {
-            // route to move backwards
-            this.$router.navigate(
-                this.navigationScenarios.CLICKED_BACK,
-                this.$route
-            );
-        },
-        attachCustomEvents() {
-            this.prependActionToMethod(this, this.forwardButtonAction, () => {
-                this.pushEventToGA(
-                    this.$route.query[this.queryStrings.FMG_PAGE],
-                    this.GaActions.SUBMITTED,
-                    this.GaLabels.ADDRESS_LOOKUP,
-                    true
-                );
-            });
-        },
-        getRegistrationAddressFromStore() {
-            return store.getters.vehicle.registration.address;
-        },
-        getRegistrationCityFromStore() {
-            return store.getters.vehicle.registration.city;
-        },
-        getRegistrationStateFromStore() {
-            return store.getters.vehicle.registration.state;
-        },
-        getRegistrationZipFromStore() {
-            return store.getters.vehicle.registration.zipCode;
-        },
-        getRegistrationFirstNameFromStore() {
-            return store.getters.vehicle.registration.firstName;
-        },
-        getRegistrationLastNameFromStore() {
-            return store.getters.vehicle.registration.lastName;
-        },
-        getEmailFromStore() {
-            return store.getters.order.customer.emailAddress;
-        },
-        getServiceZipFromStore() {
-            return store.getters.order.serviceLocation.zipCode;
-        },
-        async forwardButtonAction() {
-            this.resetWarningsAndErrors();
+		// Call the "next" function to complete the transition to this page.
+		next((vm) => {
+			vm.setCmsContent(resultMap.cmsContent);
+		});
+	},
+	data() {
+		return {
+			customerQuestions: {
+				addressQuestions: {
+					streetAddress: this.getRegistrationAddressFromStore(),
+					city: this.getRegistrationCityFromStore(),
+					state: this.getRegistrationStateFromStore(),
+					zipCode: this.getRegistrationZipFromStore(),
+				},
+				firstName: this.getRegistrationFirstNameFromStore(),
+				lastName: this.getRegistrationLastNameFromStore(),
+				emailAddress: this.getEmailFromStore(),
+			}, 
+			serviceZipCode: this.getServiceZipFromStore(),
+			displayNonServiceableZipAlert: false,
+			displayVinNotFoundAlert: false,
+			displayMatchedDifferentVehicleAlert: false,
+			displayVinLookupByHomeAddressNotAllowedAlert: false,
+			previouslyEnteredCarId: "",
+			isSelectedGlassAvailableForVehicle: false, 
+			customAlertData: {},
+			showServiceZipField: this.getServiceZipFromStore(),
+			isZipServicable: false,
+		}
+	},
+	methods: {
+		arePagePrerequisitesValid() {
+			return store.getters.vehicle.carId !== null;
+		},
+		resetDependentState() {
+			store.commit(storeMutations.UPDATE_REGISTRATION_LICENSE_PLATE, null);
+			store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES);
+		},
+		backButtonAction() {
+			// route to move backwards
+			this.$router.navigate(
+				this.navigationScenarios.CLICKED_BACK,
+				this.$route
+			);
+		},
+		attachCustomEvents() { 
+       this.prependActionToMethod(this, this.forwardButtonAction, () => {
+      this.pushEventToGA(
+          this.$route.query[this.queryStrings.FMG_PAGE],
+          this.GaActions.SUBMITTED,
+          this.GaLabels.ADDRESS_LOOKUP,
+          true
+     );
+      });
+	},
+		getRegistrationAddressFromStore() {
+			return store.getters.vehicle.registration.address;
+		},
+		getRegistrationCityFromStore() {
+			return store.getters.vehicle.registration.city;
+		},
+		getRegistrationStateFromStore() {
+			return store.getters.vehicle.registration.state;
+		},
+		getRegistrationZipFromStore() {
+			return store.getters.vehicle.registration.zipCode;
+		},
+		getRegistrationFirstNameFromStore() {
+			return store.getters.vehicle.registration.firstName;
+		},
+		getRegistrationLastNameFromStore() {
+			return store.getters.vehicle.registration.lastName;
+		},						
+		getEmailFromStore() {
+			return store.getters.order.customer.emailAddress;
+		},
+		getServiceZipFromStore() {
+			return store.getters.order.serviceLocation.zipCode;
+		},
+		async forwardButtonAction() {
+			this.resetWarningsAndErrors();
 
-            // Lookup VIN(s) with the provided address
-            const vinLookupPromise = this.lookupVin(
-                this.customerQuestions.lastName,
-                this.customerQuestions.addressQuestions.streetAddress,
-                this.customerQuestions.addressQuestions.zipCode,
-                this.customerQuestions.addressQuestions.state
-            );
+			// Lookup VIN(s) with the provided address
+			const vinLookupPromise = this.lookupVin(
+				this.customerQuestions.lastName, 
+				this.customerQuestions.addressQuestions.streetAddress, 
+				this.customerQuestions.addressQuestions.zipCode, 
+				this.customerQuestions.addressQuestions.state
+			);
 
-            // Verify if the service zip code or registration zip code provided is serviceable
-            const serviceZipValidationPromise = this.serviceZipCode
-                ? this.validateZip(this.serviceZipCode)
-                : this.validateZip(
-                      this.customerQuestions.addressQuestions.zipCode
-                  );
+			// Verify if the service zip code or registration zip code provided is serviceable
+			const serviceZipValidationPromise = this.serviceZipCode ? this.validateZip(this.serviceZipCode) : this.validateZip(this.customerQuestions.addressQuestions.zipCode);
 
-            const vinLookupResponse = await vinLookupPromise;
-            const serviceZipValidationResponse =
-                await serviceZipValidationPromise;
+			const vinLookupResponse = await vinLookupPromise;
+			const serviceZipValidationResponse = await serviceZipValidationPromise;
+			
+			if (!vinLookupResponse.data.isStatePermissible) {				
+				// State Restrictions forbid lookup by address
+				this.displayVinLookupByHomeAddressNotAllowedAlert = true;
+				this.$refs.funnelFooter.removeLoader();
+				return;
+			}
+			
+			// if the neither the registration zip code or service zip code are not serviceable
+			this.isZipServicable = serviceZipValidationResponse.data.isServiceable;
+			if (!this.isZipServicable) {				
+				this.displayNonServiceableZipAlert = true;
+				this.showServiceZipField = true;
+				this.$refs.funnelFooter.removeLoader();		
+			} else if (!this.serviceZipCode) {
+				// if the registration zip code is servicable and nothing was entered for the service zip code
+				// then set the service zip code to the registration zip code
+				this.serviceZipCode = this.customerQuestions.addressQuestions.zipCode;
+			} 
 
-            if (!vinLookupResponse.data.isStatePermissible) {
-                // State Restrictions forbid lookup by address
-                this.displayVinLookupByHomeAddressNotAllowedAlert = true;
-                this.$refs.funnelFooter.removeLoader();
-                return;
-            }
+			const carEntered = store.getters.vehicle;
+			const carsFound = vinLookupResponse.data.vinVehicles;
 
-            // if the neither the registration zip code or service zip code are not serviceable
-            this.isZipServicable =
-                serviceZipValidationResponse.data.isServiceable;
-            if (!this.isZipServicable) {
-                this.displayNonServiceableZipAlert = true;
-                this.showServiceZipField = true;
-                this.$refs.funnelFooter.removeLoader();
-            } else if (!this.serviceZipCode) {
-                // if the registration zip code is servicable and nothing was entered for the service zip code
-                // then set the service zip code to the registration zip code
-                this.serviceZipCode =
-                    this.customerQuestions.addressQuestions.zipCode;
-            }
+			if (carsFound.length == 0) {
+				// No VINs found					
+				this.displayVinNotFoundAlert = true;
+				this.$refs.funnelFooter.removeLoader();
+				return;				
+			} else if (carsFound.length == 1) {			
+				const carFound = carsFound[0].vehicle;
+				this.isCarIdDifferent = carFound.carId !== carEntered.carId;
 
-            const carEntered = store.getters.vehicle;
-            const carsFound = vinLookupResponse.data.vinVehicles;
+				if (this.isCarIdDifferent && carFound.carId !== this.previouslyEnteredCarId) {	
+					// Display Alert
+					this.previouslyEnteredCarId = carFound.carId;
+					this.customAlertData.vehicleInfo = carFound;
+					this.displayMatchedDifferentVehicleAlert = true;
 
-            if (carsFound.length == 0) {
-                // No VINs found
-                this.displayVinNotFoundAlert = true;
-                this.$refs.funnelFooter.removeLoader();
-                return;
-            } else if (carsFound.length == 1) {
-                const carFound = carsFound[0].vehicle;
-                this.isCarIdDifferent = carFound.carId !== carEntered.carId;
+					this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(carFound.carId);
 
-                if (
-                    this.isCarIdDifferent &&
-                    carFound.carId !== this.previouslyEnteredCarId
-                ) {
-                    // Display Alert
-                    this.previouslyEnteredCarId = carFound.carId;
-                    this.customAlertData.vehicleInfo = carFound;
-                    this.displayMatchedDifferentVehicleAlert = true;
+					// Update button "Continue with..."
+					this.$refs.funnelFooter.updateButtonText(`Continue with ${carFound.year} ${carFound.make} ${carFound.model}`);				
+					this.$refs.funnelFooter.removeLoader();
+					
+					return;
+				} 				
+								
+				if (!this.isZipServicable) {
+					return;
+				}
 
-                    this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(carFound.carId);
+				// update data if the zip or service zip is servicable
+				this.updateVehicleInfo(carsFound[0].vin, carFound);
+				this.updateCustomerInfo(serviceZipValidationResponse.data.state);
+	
+			} else if (carsFound.length > 1) {
+				if (!this.isZipServicable) {
+					return;
+				}
 
-                    // Update button "Continue with..."
-                    this.$refs.funnelFooter.updateButtonText(
-                        `Continue with ${carFound.year} ${carFound.make} ${carFound.model}`
-                    );
-                    this.$refs.funnelFooter.removeLoader();
+				// if multiple cars were found
+				let matchingCars = carsFound.filter(car => car.vehicle.carId === carEntered.carId); 
+				if (matchingCars.length === 1) {
+					// and one and only one of them matches the carId entered, save the vehicle info
+					// so we can go to the Heritage Funnel directly
+					const matchingCar = matchingCars[0];
+					this.updateVehicleInfo(matchingCar.vin, matchingCar.vehicle);
+				}
+				
+				// update data if the zip or service zip is servicable
+				this.updateCustomerInfo(serviceZipValidationResponse.data.state);
+			}
 
-                    return;
-                }
+			this.navigateForward(carEntered, carsFound);
+		},
+		resetWarningsAndErrors() {
+			this.displayVinNotFoundAlert = false;
+			this.displayNonServiceableZipAlert = false;	
+			this.displayMatchedDifferentVehicleAlert = false;
+			this.displayVinLookupByHomeAddressNotAllowedAlert = false;
+		},
+		navigateForward(carEntered, carsFound) {
+			this.updateServiceLocationIfNecessary();
+			
+			if (carsFound.length == 1) {
+				// if a different vehicle is found than the one entered and the selected glass
+				// is not available for that vehicle
+				if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {
+					this.$router.navigateAfterSave(
+						// then navigate back to "vehicle-damage", and display vehicle changed alert
+						// on that page
+						this.navigationScenarios.CONTINUING_WITH_DIFFERENT_GLASS,
+						this.$route, {}, {
+							displayVehicleChangeAlert: true
+						}, {}
+					);
+				} else {
+					// otherwise 
+					this.$refs.loadingModal.showModal();
+					navigateAfterSaveToHeritageFunnel(this.$route);
+				}				
+			} else if (carsFound.length > 1) {
+				// if multiple cars were found
+				let matchingCars = carsFound.filter(car => car.vehicle.carId === carEntered.carId);  
+				if (matchingCars.length === 1) {
+					this.$refs.loadingModal.showModal();
 
-                if (!this.isZipServicable) {
-                    return;
-                }
+					// and one and only of them matches the car id entered
+					const matchingCar = matchingCars[0];					
+					this.updateVehicleInfo(matchingCar.vin, matchingCar.vehicle);
+					navigateAfterSaveToHeritageFunnel(this.$route);
+				} else {
+					// if there are no matches or there are multiple matches, navigate to "address-vehicles" page
+					this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_MULTIPLE_VEHICLES, this.$route, {}, {}, carsFound);
+				}
+			} 
 
-                // update data if the zip or service zip is servicable
-                this.updateVehicleInfo(carsFound[0].vin, carFound);
-                this.updateCustomerInfo(
-                    serviceZipValidationResponse.data.state
-                );
-            } else if (carsFound.length > 1) {
-                if (!this.isZipServicable) {
-                    return;
-                }
+		},
+		validateZip(zip) {
+			return baseMixin.methods.dispatchStoreAction(
+				storeActions.VALIDATE_ZIP, 
+				{ zip });
+		},
+		lookupVin(lastName, streetAddress, zip, state) {
+			return baseMixin.methods.dispatchStoreAction(
+				storeActions.LOOKUP_VIN_BY_ADDRESS,
+				{ 
+					licenseLastName: lastName, 
+					licenseStreetAddress: streetAddress, 
+					licenseZip: zip, 
+					licenseState: state 
+				}, false
+			);
+		},
+		updateVehicleInfo(vin, vehicleInfo) {
+			store.commit(storeMutations.UPDATE_VEHICLE_VIN, vin);
+			store.commit(storeMutations.UPDATE_YEAR, vehicleInfo.year);
+			store.commit(storeMutations.UPDATE_MAKE, vehicleInfo.make);
+			store.commit(storeMutations.UPDATE_MODEL, vehicleInfo.model);
+			store.commit(storeMutations.UPDATE_STYLE, vehicleInfo.style);
+			store.commit(storeMutations.UPDATE_CAR_ID, vehicleInfo.carId);
+			store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, vehicleInfo.category);
+			store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, vehicleInfo.imageUrl);
+			store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, vehicleInfo.imageVifNumber);
+			store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, vehicleInfo.imageColor);
+		},		
+		updateCustomerInfo(serviceState) {
+			store.commit(storeMutations.UPDATE_REGISTRATION_ADDRESS, this.customerQuestions.addressQuestions.streetAddress);
+			store.commit(storeMutations.UPDATE_REGISTRATION_CITY, this.customerQuestions.addressQuestions.city);
+			store.commit(storeMutations.UPDATE_REGISTRATION_STATE, this.customerQuestions.addressQuestions.state);
+			store.commit(storeMutations.UPDATE_REGISTRATION_ZIP_CODE, this.customerQuestions.addressQuestions.zipCode);
+			store.commit(storeMutations.UPDATE_REGISTRATION_FIRST_NAME, this.customerQuestions.firstName);
+			store.commit(storeMutations.UPDATE_REGISTRATION_LAST_NAME, this.customerQuestions.lastName);
+			store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP_CODE, this.serviceZipCode);			
+			store.commit(storeMutations.UPDATE_SERVICE_LOCATION_STATE, serviceState);			
+			store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, this.customerQuestions.emailAddress);
+		},		
+		updateServiceLocationIfNecessary() {
+			const serviceLocation = store.getters.order.serviceLocation;
 
-                // if multiple cars were found
-                let matchingCars = carsFound.filter(
-                    (car) => car.vehicle.carId === carEntered.carId
-                );
-                if (matchingCars.length === 1) {
-                    // and one and only one of them matches the carId entered, save the vehicle info
-                    // so we can go to the Heritage Funnel directly
-                    const matchingCar = matchingCars[0];
-                    this.updateVehicleInfo(
-                        matchingCar.vin,
-                        matchingCar.vehicle
-                    );
-                }
+			if (!serviceLocation.address && serviceLocation.zipCode && serviceLocation.zipCode == store.getters.vehicle.registration.zipCode) {
+				baseMixin.methods.dispatchStoreAction(
+					storeActions.UPDATE_SERVICE_LOCATION_WITH_VEHICLE_REGISTRATION
+				);
+			}
+		}
+	},
+	mounted() {
+    this.attachCustomEvents();
+  },
+	computed: {
+		AlertNonServiceableZipHeader(){
+			const zipCode = this.serviceZipCode ? this.serviceZipCode : this.customerQuestions.addressQuestions.zipCode;
+			const text = this.getCmsContent("AlertNonServiceableZipWidget", "HeadlineText").replaceAll("{custom:serviceZip}", zipCode);
+			return text;
+		},
+		AlertNonServiceableZipBody(){
+			return this.getCmsContent("AlertNonServiceableZipWidget", "BodyText");
+		},		
+		AlertMatchedDifferentVehicleHeader(){
+			const text = this.getCmsContent("AlertMatchedDifferentVehicleWidget", "HeadlineText").replaceAll("{custom:glassText}", getDamageString());
+			return text;
+		},
+		AlertMatchedDifferentVehicleBody(){
 
-                // update data if the zip or service zip is servicable
-                this.updateCustomerInfo(
-                    serviceZipValidationResponse.data.state
-                );
-            }
+			const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
+			const vinYmmExpected = `${store.getters.vehicle.year} ${store.getters.vehicle.make} ${store.getters.vehicle.model}`;
 
-            this.navigateForward(carEntered, carsFound);
-        },
-        resetWarningsAndErrors() {
-            this.displayVinNotFoundAlert = false;
-            this.displayNonServiceableZipAlert = false;
-            this.displayMatchedDifferentVehicleAlert = false;
-            this.displayVinLookupByHomeAddressNotAllowedAlert = false;
-        },
-        navigateForward(carEntered, carsFound) {
-            this.updateServiceLocationIfNecessary();
+			const content = this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText")
+				.replaceAll("{custom:glassText}", getDamageString())
+				.replaceAll("{custom:vinYmmFound}", vinYmmFound)
+				.replaceAll("{custom:vinYmmExpected}", vinYmmExpected);			
 
-            if (carsFound.length == 1) {
-                // if a different vehicle is found than the one entered and the selected glass
-                // is not available for that vehicle
-                if (
-                    this.isCarIdDifferent &&
-                    !this.isSelectedGlassAvailableForVehicle
-                ) {
-                    this.$router.navigateAfterSave(
-                        // then navigate back to "vehicle-damage", and display vehicle changed alert
-                        // on that page
-                        this.navigationScenarios
-                            .CONTINUING_WITH_DIFFERENT_GLASS,
-                        this.$route,
-                        {},
-                        {
-                            displayVehicleChangeAlert: true,
-                        },
-                        {}
-                    );
-                } else {
-                    // otherwise
-                    this.$refs.loadingModal.showModal();
-                    navigateAfterSaveToHeritageFunnel(this.$route);
-                }
-            } else if (carsFound.length > 1) {
-                // if multiple cars were found
-                let matchingCars = carsFound.filter(
-                    (car) => car.vehicle.carId === carEntered.carId
-                );
-                if (matchingCars.length === 1) {
-                    this.$refs.loadingModal.showModal();
-
-                    // and one and only of them matches the car id entered
-                    const matchingCar = matchingCars[0];
-                    this.updateVehicleInfo(
-                        matchingCar.vin,
-                        matchingCar.vehicle
-                    );
-                    navigateAfterSaveToHeritageFunnel(this.$route);
-                } else {
-                    // if there are no matches or there are multiple matches, navigate to "address-vehicles" page
-                    this.$router.navigateAfterSave(
-                        this.navigationScenarios
-                            .CONTINUING_WITH_MULTIPLE_VEHICLES,
-                        this.$route,
-                        {},
-                        {},
-                        carsFound
-                    );
-                }
-            }
-        },
-        validateZip(zip) {
-            return baseMixin.methods.dispatchStoreAction(
-                storeActions.VALIDATE_ZIP,
-                { zip }
-            );
-        },
-        lookupVin(lastName, streetAddress, zip, state) {
-            return baseMixin.methods.dispatchStoreAction(
-                storeActions.LOOKUP_VIN_BY_ADDRESS,
-                {
-                    licenseLastName: lastName,
-                    licenseStreetAddress: streetAddress,
-                    licenseZip: zip,
-                    licenseState: state,
-                },
-                false
-            );
-        },
-        updateVehicleInfo(vin, vehicleInfo) {
-            store.commit(storeMutations.UPDATE_VEHICLE_VIN, vin);
-            store.commit(storeMutations.UPDATE_YEAR, vehicleInfo.year);
-            store.commit(storeMutations.UPDATE_MAKE, vehicleInfo.make);
-            store.commit(storeMutations.UPDATE_MODEL, vehicleInfo.model);
-            store.commit(storeMutations.UPDATE_STYLE, vehicleInfo.style);
-            store.commit(storeMutations.UPDATE_CAR_ID, vehicleInfo.carId);
-            store.commit(
-                storeMutations.UPDATE_VEHICLE_CATEGORY,
-                vehicleInfo.category
-            );
-            store.commit(
-                storeMutations.UPDATE_VEHICLE_IMAGE_URL,
-                vehicleInfo.imageUrl
-            );
-            store.commit(
-                storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER,
-                vehicleInfo.imageVifNumber
-            );
-            store.commit(
-                storeMutations.UPDATE_VEHICLE_IMAGE_COLOR,
-                vehicleInfo.imageColor
-            );
-        },
-        updateCustomerInfo(serviceState) {
-            store.commit(
-                storeMutations.UPDATE_REGISTRATION_ADDRESS,
-                this.customerQuestions.addressQuestions.streetAddress
-            );
-            store.commit(
-                storeMutations.UPDATE_REGISTRATION_CITY,
-                this.customerQuestions.addressQuestions.city
-            );
-            store.commit(
-                storeMutations.UPDATE_REGISTRATION_STATE,
-                this.customerQuestions.addressQuestions.state
-            );
-            store.commit(
-                storeMutations.UPDATE_REGISTRATION_ZIP_CODE,
-                this.customerQuestions.addressQuestions.zipCode
-            );
-            store.commit(
-                storeMutations.UPDATE_REGISTRATION_FIRST_NAME,
-                this.customerQuestions.firstName
-            );
-            store.commit(
-                storeMutations.UPDATE_REGISTRATION_LAST_NAME,
-                this.customerQuestions.lastName
-            );
-            store.commit(
-                storeMutations.UPDATE_SERVICE_LOCATION_ZIP_CODE,
-                this.serviceZipCode
-            );
-            store.commit(
-                storeMutations.UPDATE_SERVICE_LOCATION_STATE,
-                serviceState
-            );
-            store.commit(
-                storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS,
-                this.customerQuestions.emailAddress
-            );
-        },
-        updateServiceLocationIfNecessary() {
-            const serviceLocation = store.getters.order.serviceLocation;
-
-            if (
-                !serviceLocation.address &&
-                serviceLocation.zipCode &&
-                serviceLocation.zipCode ==
-                    store.getters.vehicle.registration.zipCode
-            ) {
-                baseMixin.methods.dispatchStoreAction(
-                    storeActions.UPDATE_SERVICE_LOCATION_WITH_VEHICLE_REGISTRATION
-                );
-            }
-        },
-    },
-    mounted() {
-        this.attachCustomEvents();
-    },
-    computed: {
-        AlertNonServiceableZipHeader() {
-            const zipCode = this.serviceZipCode
-                ? this.serviceZipCode
-                : this.customerQuestions.addressQuestions.zipCode;
-            const text = this.getCmsContent(
-                "AlertNonServiceableZipWidget",
-                "HeadlineText"
-            ).replaceAll("{custom:serviceZip}", zipCode);
-            return text;
-        },
-        AlertNonServiceableZipBody() {
-            return this.getCmsContent(
-                "AlertNonServiceableZipWidget",
-                "BodyText"
-            );
-        },
-        AlertMatchedDifferentVehicleHeader() {
-            const text = this.getCmsContent(
-                "AlertMatchedDifferentVehicleWidget",
-                "HeadlineText"
-            ).replaceAll("{custom:glassText}", getDamageString());
-            return text;
-        },
-        AlertMatchedDifferentVehicleBody() {
-            const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
-            const vinYmmExpected = `${store.getters.vehicle.year} ${store.getters.vehicle.make} ${store.getters.vehicle.model}`;
-
-            const content = this.getCmsContent(
-                "AlertMatchedDifferentVehicleWidget",
-                "BodyText"
-            )
-                .replaceAll("{custom:glassText}", getDamageString())
-                .replaceAll("{custom:vinYmmFound}", vinYmmFound)
-                .replaceAll("{custom:vinYmmExpected}", vinYmmExpected);
-
-            return content;
-        },
-    },
-    watch: {
-        customerQuestions: {
-            handler(newValue) {
-                // if they modify one of the lookup fields (address, city, state, zipCode, or lastName), then modify the button text back to “Get my personalized quote”
-                this.$refs.funnelFooter.updateButtonText(
-                    this.getCmsContent(
-                        "FunnelFooterWidget",
-                        "ForwardButtonText"
-                    )
-                );
-                this.showServiceZipField = false;
-                this.resetWarningsAndErrors();
-            },
-            deep: true,
-        },
-        serviceZipCode: {
-            handler(newValue) {
-                // if they modify the service zip code, then hide the error message”
-                this.displayNonServiceableZipAlert = false;
-            },
-        },
-        showServiceZipField: {
-            handler(newValue) {
-                // if the Service Zip Code field is ever hidden, clear out it's value
-                if (!newValue) {
-                    this.serviceZipCode = null;
-                }
-            },
-        },
-    },
-    components: {
-        funnelHeader,
-        funnelFooter,
-        vehicleBanner,
-        funnelSubHeader,
-        customerQuestions,
-        textboxQuestion,
-        alert,
-        loadingModal,
-        Form,
-    },
+			return content;
+		},		
+	},
+	watch: {
+		customerQuestions: {		
+			handler(newValue) {
+				// if they modify one of the lookup fields (address, city, state, zipCode, or lastName), then modify the button text back to “Get my personalized quote”
+				this.$refs.funnelFooter.updateButtonText(this.getCmsContent("FunnelFooterWidget", "ForwardButtonText"));
+				this.showServiceZipField = false;
+				this.resetWarningsAndErrors();
+			},
+			deep: true
+		},
+		serviceZipCode: {
+			handler(newValue) {
+				// if they modify the service zip code, then hide the error message”
+				this.displayNonServiceableZipAlert = false;
+			},
+		},
+		showServiceZipField: {
+			handler(newValue) {
+				// if the Service Zip Code field is ever hidden, clear out it's value
+				if (!newValue) {
+					this.serviceZipCode = null;
+				}			
+			},			
+		}
+	},
+	components: {
+		funnelHeader,
+		funnelFooter,
+		vehicleBanner,
+		funnelSubHeader,
+		customerQuestions,
+		textboxQuestion,
+		alert,
+		loadingModal,
+		Form
+	},
 };
 </script>

From 155aaa80b63d8eec4493c83f5d456bd709995b6e Mon Sep 17 00:00:00 2001
From: FrankRua <frank.rua@safelite.com>
Date: Tue, 31 May 2022 10:47:30 -0400
Subject: [PATCH 17/32] auto tag release

---
 azure-pipelines.yml | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/azure-pipelines.yml b/azure-pipelines.yml
index c8184f93f..bc619bff5 100644
--- a/azure-pipelines.yml
+++ b/azure-pipelines.yml
@@ -168,4 +168,11 @@ stages:
                     indexDeployVariables:
                       __VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__: $(__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__)
                       __VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__: $(__VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__)
-                    cfDistributionId: $(cfDistributionId)
\ No newline at end of file
+                    cfDistributionId: $(cfDistributionId)
+    - stage: AutoTagReleaseBuild
+      displayName: Auto Tag Release Build For Production
+      jobs:
+        - template: templates/digital/auto-tag.yml@AzureDevOps
+          parameters:
+            userName: SafeliteAzureDevops
+            userEmail: githubazuredevops@safelite.com
\ No newline at end of file

From 4be843e1b8896da73cd39a19386c406f74dc6699 Mon Sep 17 00:00:00 2001
From: CarlNation <carl.nation@safelite.com>
Date: Tue, 31 May 2022 13:11:16 -0400
Subject: [PATCH 18/32] CSR-663 changes to make sure funnel as skey(session log
 seq num)

---
 src/constants/endpoints.js                    |  4 ++
 src/constants/store-actions.js                |  1 +
 .../heritage-integration/cookie-helper.js     |  8 ++++
 src/mixins/analytics-mixin.js                 | 46 +++++++++++++------
 src/mixins/analytics-mixin.spec.js            | 39 ++++++++++++++--
 src/store/index.js                            | 20 ++++++++
 src/store/store.spec.js                       | 19 +++++++-
 7 files changed, 118 insertions(+), 19 deletions(-)

diff --git a/src/constants/endpoints.js b/src/constants/endpoints.js
index 059693773..7ff9e3cec 100644
--- a/src/constants/endpoints.js
+++ b/src/constants/endpoints.js
@@ -79,6 +79,10 @@ const endpoints = {
     url: "/analytics/api/v1/analytics/log-custom-event",
     method: "POST",
   },
+  InitializeSession:{
+    url: "/analytics/api/v1/analytics/initialize",
+    method: "POST",
+  },
   GetExperimentsByUser: {
     url: "/analytics/api/v1/analytics/get-experiments",
     method: "GET",
diff --git a/src/constants/store-actions.js b/src/constants/store-actions.js
index fe658fbe1..0ac79ac28 100644
--- a/src/constants/store-actions.js
+++ b/src/constants/store-actions.js
@@ -21,6 +21,7 @@ const storeActions = {
   LOG_EXPERIMENT_EXPOSURE: "logExperimentExposure",
   LOG_PAGE_VIEW: "logPageView",
   LOG_CUSTOM_EVENT: "logCustomEvent",
+  INITIALIZE_SESSION: "initializeSession",
   GET_EXPERIMENTS_BY_USER: "GetExperimentsByUser",
   UPDATE_SERVICE_LOCATION_WITH_VEHICLE_REGISTRATION: "updateServiceLocationWithVehicleRegistration",
 
diff --git a/src/helpers/heritage-integration/cookie-helper.js b/src/helpers/heritage-integration/cookie-helper.js
index f3b730f90..5d681f17f 100644
--- a/src/helpers/heritage-integration/cookie-helper.js
+++ b/src/helpers/heritage-integration/cookie-helper.js
@@ -104,6 +104,14 @@ export function getSessionIdValue(){
     return '00000000-0000-0000-0000-000000000000';
 }
 
+export function setCookieProperties(properties) {
+    if (typeof properties == "object") {
+        Object.keys(properties).forEach(key => {
+            document.cookie = `${key}=${properties[key]}`;
+        });
+    }
+}
+
 /*
 ===========================
 =   PRIVATE FUNCTIONS     =
diff --git a/src/mixins/analytics-mixin.js b/src/mixins/analytics-mixin.js
index ca5a24a3e..fda94e79d 100644
--- a/src/mixins/analytics-mixin.js
+++ b/src/mixins/analytics-mixin.js
@@ -1,18 +1,17 @@
 import { storeActions } from "@/constants/store-actions";
-import { getDeviceIdValue, getSessionIdValue, getSessionKeyValue } from "@/helpers/heritage-integration/cookie-helper";
+import { setCookieProperties, getDeviceIdValue, getSessionIdValue, getSessionKeyValue } from "@/helpers/heritage-integration/cookie-helper";
 import { queryStrings } from "@/constants/query-strings";
 import { experimentSettings } from "@/constants/experiments";
 import { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents } from "@/constants/analytics";
+import { cookieNames } from "@/constants/cookie-names";
 
 import baseMixin from "@/mixins/base-mixin";
 
 export default {
   methods: {
     logPageView(pageEvent) {
-      // if the user does not have a session id from the content site, do not log.
-      const sid = getSessionIdValue();
-      if (sid === '00000000-0000-0000-0000-000000000000' || sid == null) {
-        return;
+      if (getSessionKeyValue() === 0 || getSessionIdValue() === '00000000-0000-0000-0000-000000000000') {
+        this.initSession();
       }
 
       const currentPageName = getPageNameByQueryString();
@@ -20,38 +19,59 @@ export default {
         userId: getDeviceIdValue(),
         sessionKey: getSessionKeyValue(),
         pageName: currentPageName,
-        sessionId: sid,
+        sessionId: getSessionIdValue(),
         action: '', 
         event: pageEvent,
-        shouldUseSessionId: true,
+        shouldUseSessionId: false,
       };
 
       baseMixin.methods.dispatchStoreAction(storeActions.LOG_PAGE_VIEW, payload, false);
     },
 
     logCustomEvent(category, action, label, value) {
-      // if the user does not have a session id from the content site, do not log.
-      const sid = getSessionIdValue();
-      if (sid === '00000000-0000-0000-0000-000000000000' || sid == null) {
-        return;
+      if (getSessionKeyValue() === 0 || getSessionIdValue() === '00000000-0000-0000-0000-000000000000') {
+        this.initSession();
       }
 
       const currentPageName = getPageNameByQueryString();
+
       var payload = {
         userId: getDeviceIdValue(),
         sessionKey: getSessionKeyValue(),
         pageName: currentPageName,
-        sessionId: sid,
+        sessionId: getSessionIdValue(),
         category: category, 
         action: action,
         label: label,
         value: value,
-        shouldUseSessionId: true,
+        shouldUseSessionId: false,
       };
 
       baseMixin.methods.dispatchStoreAction(storeActions.LOG_CUSTOM_EVENT, payload, false);
     },
 
+    async initSession() {
+      const sid = getSessionIdValue();
+      const skey = getSessionKeyValue();
+      var payload = {
+        userId: getDeviceIdValue(),
+        sessionId: sid,
+        userAgent: navigator.userAgent,
+        referrer: document.referrer,
+      };
+
+      const response = await baseMixin.methods.dispatchStoreAction(storeActions.INITIALIZE_SESSION, payload, false);
+      
+      if (response.data) {
+        if (response.data.sessionKey && skey === 0) {
+          setCookieProperties({ [cookieNames.SESSION_KEY]: response.data.sessionKey});
+        }
+        if (response.data.sessionId && sid === '00000000-0000-0000-0000-000000000000') {
+          setCookieProperties({ [cookieNames.SESSION_ID]: response.data.sessionId});
+        }
+      }
+    },
+
     pushEventToGA(category, action, label, pushToLogApp = false) {
       const currentPageName = getPageNameByQueryString();
       const eventToBePushed = {
diff --git a/src/mixins/analytics-mixin.spec.js b/src/mixins/analytics-mixin.spec.js
index db773da56..7d9cec1bb 100644
--- a/src/mixins/analytics-mixin.spec.js
+++ b/src/mixins/analytics-mixin.spec.js
@@ -1,6 +1,7 @@
 import analyticsMixin from "@/mixins/analytics-mixin";
 import { setupMocksForJsFiles, setupCookies } from "@/helpers/unit-test-helper.js";
 import { storeActions } from "@/constants/store-actions";
+import { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents } from "@/constants/analytics";
 
 describe("analyticsMixin.js", () => {
   test("logPageView: calls dispatch with type and payload", () => {
@@ -26,9 +27,6 @@ describe("analyticsMixin.js", () => {
   });
 
   test("logCustomEvent: calls dispatch with type and payload", () => {
-    const type = "";
-    const payload = {};
-
     const mockData = {
       actionList: [{
         actionName: storeActions.LOG_CUSTOM_EVENT
@@ -36,7 +34,7 @@ describe("analyticsMixin.js", () => {
     }
     const mocks = setupMocksForJsFiles(mockData);
 
-    analyticsMixin.methods.logCustomEvent(type, payload);
+    analyticsMixin.methods.logCustomEvent("someCat", "someAction", "someLabel", "someVal");
 
     expect(mocks.baseMixin.methods.dispatchStoreAction).toBeCalled();
   });
@@ -126,4 +124,37 @@ describe("analyticsMixin.js", () => {
     //Assert
     expect(obj!=null); 
   });
+
+  test("analyticsPageEvents returns constants analyticsPageEvents", () => {
+    //Act
+    const analyticsPE = analyticsMixin.computed.analyticsPageEvents();
+
+    //Assert
+    expect(analyticsPE).toEqual(analyticsPageEvents);
+  });
+
+  test("GaActions returns constants GaActions", () => {
+    //Act
+    const gaActions = analyticsMixin.computed.GaActions();
+
+    //Assert
+    expect(gaActions).toEqual(GaActions);
+  });
+
+  test("GaCategories returns constants GaCategories", () => {
+    //Act
+    const gaCategories = analyticsMixin.computed.GaCategories();
+
+    //Assert
+    expect(gaCategories).toEqual(GaCategories);
+  });
+
+  test("GaLabels returns constants GaLabels", () => {
+    //Act
+    const gaLabels = analyticsMixin.computed.GaLabels();
+
+    //Assert
+    expect(gaLabels).toEqual(GaLabels);
+  });
+
 });
\ No newline at end of file
diff --git a/src/store/index.js b/src/store/index.js
index 814ca2d5b..dda0fab35 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -509,6 +509,26 @@ export const actions = {
     });
   },
 
+  initializeSession(context, { userId, sessionId, userAgent, referrer }) {
+    var payload = {
+      applicationName: 'SafeliteDotCom',
+      userId: userId,
+      deviceId: userId,
+      sessionId: sessionId,
+      userAgent: userAgent,
+      operatorId: "WEB",
+      userName: "SafeliteConceptFunnel",
+      referrer: referrer
+    };
+
+    return globalMethods.callHttpClient({
+      method: endpoints.InitializeSession.method,
+      endpoint: endpoints.InitializeSession.url,
+      payload: payload,
+      logApiCall: false
+    });
+  },
+
   GetExperimentsByUser(context, { userId }){
     return globalMethods.callHttpClient({
       method: endpoints.GetExperimentsByUser.method,
diff --git a/src/store/store.spec.js b/src/store/store.spec.js
index 24aa7cbd3..bdb49ece7 100644
--- a/src/store/store.spec.js
+++ b/src/store/store.spec.js
@@ -642,7 +642,7 @@ describe("Actions", () => {
     });
 
     // Assert
-    const response = await actions.logPageView(context, { userId: "userId", sessionKey: "sessionKey", pageName: "pageName", sessionId: "sessionId", pageEvent: pageEvent, shouldUseSessionId: true });
+    const response = await actions.logPageView(context, { userId: "userId", sessionKey: "sessionKey", pageName: "pageName", sessionId: "sessionId", pageEvent: pageEvent, shouldUseSessionId: false });
     expect(response).toEqual({});
   });
 
@@ -663,7 +663,22 @@ describe("Actions", () => {
     });
 
     // Assert
-    const response = await actions.logCustomEvent(context, { userId: "userId", sessionKey: "sessionKey", pageName: "pageName", sessionId: "sessionId", customEvent: customEvent, shouldUseSessionId: true });
+    const response = await actions.logCustomEvent(context, { userId: "userId", sessionKey: "sessionKey", pageName: "pageName", sessionId: "sessionId", customEvent: customEvent, shouldUseSessionId: false });
+    expect(response).toEqual({});
+  });
+
+  it("initializeSession action, should return nothing", async () => {
+
+    // Arrange
+    const context = state;
+
+    // Act
+    globalMethods.callHttpClient.mockImplementation(() => {
+      return Promise.resolve({  });
+    });
+
+    // Assert
+    const response = await actions.initializeSession(context, { userId: "userId", sessionId: "", userAgent: "", referrer: "", shouldUseSessionId: false });
     expect(response).toEqual({});
   });
 

From e525fa1926e3e6dab747f73aa5d75edd97c8bfc4 Mon Sep 17 00:00:00 2001
From: FrankRua <frank.rua@safelite.com>
Date: Tue, 31 May 2022 13:46:55 -0400
Subject: [PATCH 19/32] update pipeline tag

---
 azure-pipelines.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/azure-pipelines.yml b/azure-pipelines.yml
index bc619bff5..b4b54000e 100644
--- a/azure-pipelines.yml
+++ b/azure-pipelines.yml
@@ -26,7 +26,7 @@ resources:
       type: github
       name: Safelite/AzureDevOps
       endpoint: Safelite
-      ref: refs/tags/t5.4.0
+      ref: refs/tags/t5.5.19
 
 variables:
   - group: Digital-Infrastructure

From b790245b876dab94224e1f8bf3514e8c012741f5 Mon Sep 17 00:00:00 2001
From: FrankRua <frank.rua@safelite.com>
Date: Tue, 31 May 2022 14:18:11 -0400
Subject: [PATCH 20/32] Add environment to artifact

---
 azure-pipelines.yml | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/azure-pipelines.yml b/azure-pipelines.yml
index b4b54000e..3819fca35 100644
--- a/azure-pipelines.yml
+++ b/azure-pipelines.yml
@@ -67,9 +67,10 @@ stages:
                 - template: templates/digital/step-build-vue.yml@AzureDevOps
                   parameters:
                     buildOutputDir: dist
+                    environment: Dev
                 - template: templates/digital/step-deploy-vue.yml@AzureDevOps
                   parameters:
-                    artifactName: vueDist
+                    artifactName: vueDistDev
                     awsProfile: $(devDeploymentProfile)
                     outputPath: /fmg/
                     deployBuckets:
@@ -109,9 +110,10 @@ stages:
                 - template: templates/digital/step-build-vue.yml@AzureDevOps
                   parameters:
                     buildOutputDir: dist
+                    environment: Qa
                 - template: templates/digital/step-deploy-vue.yml@AzureDevOps
                   parameters:
-                    artifactName: vueDist
+                    artifactName: vueDistQa
                     awsProfile: $(qaDeploymentProfile)
                     outputPath: /fmg/
                     deployBuckets:
@@ -150,9 +152,10 @@ stages:
                 - template: templates/digital/step-build-vue.yml@AzureDevOps
                   parameters:
                     buildOutputDir: dist
+                    environment: Prod
                 - template: templates/digital/step-deploy-vue.yml@AzureDevOps
                   parameters:
-                    artifactName: vueDist
+                    artifactName: vueDistProd
                     awsProfile: $(prodDeploymentProfile)
                     outputPath: /fmg/
                     deployBuckets:

From e9bc0caf6990f08131270d53e8337f111aa6e5bf Mon Sep 17 00:00:00 2001
From: Katie <katie.oh@safelite.com>
Date: Tue, 31 May 2022 15:09:23 -0400
Subject: [PATCH 21/32] CSR-628 Add license-plate-lookup tests

---
 src/layouts/address-lookup/address-lookup.spec.js         | 1 -
 src/layouts/license-plate-lookup/license-plate-lookup.vue | 6 +++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/layouts/address-lookup/address-lookup.spec.js b/src/layouts/address-lookup/address-lookup.spec.js
index 885cacf50..a80b07415 100644
--- a/src/layouts/address-lookup/address-lookup.spec.js
+++ b/src/layouts/address-lookup/address-lookup.spec.js
@@ -317,7 +317,6 @@ describe("address-lookup.vue", () => {
 
 function setupMocks(mountOptions, { isZipServiceable = true, lookupVinbyAddressResponse }) {
   store.commit(storeMutations.RESET_STATE);
-  console.log(isZipServiceable)
   const wrapper = shallowMount(addressLookup, getMountOptions({
     ...mountOptions,
     actionList: [
diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue
index 38217009d..f3a5d3e83 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.vue
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue
@@ -220,19 +220,18 @@ export default {
       return store.getters.order.customer.emailAddress;
     },
     getServiceZipFromStore() {
-      return store.getters.order.serviceLocation.zip;
+      return store.getters.order.serviceLocation.zipCode;
     },
     backButtonAction() {
       this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
     },
     async forwardButtonAction() {
-
       //Call zip validation services
       const registrationZipValidationPromise = this.validateZip(this.registrationZip);
       const serviceZipValidationPromise = this.serviceZip ? this.validateZip(this.serviceZip) : null;
       const registrationZipValidationResults = await registrationZipValidationPromise;
       const serviceZipValidationResults = serviceZipValidationPromise !== null ? (await serviceZipValidationPromise) : registrationZipValidationResults;
-      
+
       //Handle service zip validations
       if (!serviceZipValidationResults.data.isServiceable) {
         this.$refs.funnelFooter.removeLoader();
@@ -255,6 +254,7 @@ export default {
         this.isCarIdDifferent = false;
         return;
       });
+      
       this.isCarIdDifferent =
         vinLookup.data.vehicle.carId !== store.getters.vehicle.carId;
 

From 0bd71aa8e045ed0d46508f80dc497729728ddc61 Mon Sep 17 00:00:00 2001
From: Katie <katie.oh@safelite.com>
Date: Tue, 31 May 2022 15:10:26 -0400
Subject: [PATCH 22/32] CSR-628 Add license-plate-lookup tests

---
 .../license-plate-lookup.spec.js              | 303 ++++++++++++------
 1 file changed, 212 insertions(+), 91 deletions(-)

diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.spec.js b/src/layouts/license-plate-lookup/license-plate-lookup.spec.js
index 99f1f86c8..a6c919713 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.spec.js
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.spec.js
@@ -6,10 +6,13 @@ import { settleAllPromises } from "@/helpers/layout-helper.js";
 import * as navigateToHeritage from "@/helpers/heritage-integration/navigation-helper";
 import baseMixin from "@/mixins/base-mixin";
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
-import { shallowMount, flushPromises } from "@vue/test-utils";
+import { shallowMount, flushPromises, mount } from "@vue/test-utils";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import { nextTick } from "vue";
+import { storeMutations } from "@/constants/store-mutations";
+import errorMessages from "@/constants/error-messages";
 import store from "@/store";
+import router from "../../router";
 
 jest.mock('@/assets/img/loader.gif', () => 'loader.gif')
 jest.mock('@/assets/img/windshield.png', () => 'windshield.png')
@@ -24,73 +27,58 @@ jest.mock("@/helpers/cms-content-helper", () => ({
   fetchCmsContentForPage: jest.fn(),
 }));
 
-// Mock Store
-jest.mock("@/store", () => ({
-  commit: jest.fn(),
-  dispatch: jest.fn(),
-  getters: {
-    order: {
-      customer: { emailAddress: "test@test.com" },
-      serviceLocation: { zip: "11111" },
-    },
-    vehicle: {
-      carId: "TESTID",
-      registration: {
-        licensePlate: "TESTPLATE",
-        zipCode: "12345",
-      },
-    },
-    eventBusItem: jest.fn(),
-    damage: {
-      glassToReplace: []
-    },
-  },
-}));
-
 describe("license-plate-lookup.vue", () => {
   describe("get values from store", () => {
     test("getLicensePlateFromStore returns store license plate", async () => {
       // Arrange
       const { wrapper } = setupMocks({});
+      const mockLicensePlate = "TESTPLATE";
+      store.commit(storeMutations.UPDATE_REGISTRATION_LICENSE_PLATE, mockLicensePlate);
 
-      // ACT
+      // Act
       const licensePlate = wrapper.vm.getLicensePlateFromStore();
 
       // Assert
-      expect(licensePlate).toEqual("TESTPLATE");
+      expect(licensePlate).toEqual(mockLicensePlate);
     });
 
     test("getRegistrationZipFromStore returns store registration zip", async () => {
       // Arrange
       const { wrapper } = setupMocks({});
+      const mockRegistrationZip = "12345";
+      store.commit(storeMutations.UPDATE_REGISTRATION_ZIP_CODE, mockRegistrationZip);
 
       // ACT
       const registrationZip = wrapper.vm.getRegistrationZipFromStore();
 
       // Assert
-      expect(registrationZip).toEqual("12345");
+      expect(registrationZip).toEqual(mockRegistrationZip);
     });
 
     test("getEmailFromStore returns store customer email", async () => {
       // Arrange
       const { wrapper } = setupMocks({});
+      const mockEmail = "test@test.com";
+      store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, mockEmail);
 
       // ACT
       const customerEmail = wrapper.vm.getEmailFromStore();
 
       // Assert
-      expect(customerEmail).toEqual("test@test.com");
+      expect(customerEmail).toEqual(mockEmail);
     });
 
     test("getServiceZipFromStore returns store service zip", async () => {
       // Arrange
       const { wrapper } = setupMocks({});
+      const mockServiceZip = "11111";
+      store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP_CODE, mockServiceZip);
 
       // ACT
       const serviceZip = wrapper.vm.getServiceZipFromStore();
 
       // Assert
-      expect(serviceZip).toEqual("11111");
+      expect(serviceZip).toEqual(mockServiceZip);
     });
   });
 
@@ -99,7 +87,7 @@ describe("license-plate-lookup.vue", () => {
 
       //Arrange
       const { wrapper } = setupMocks({});
-  
+
       //Act
       licensePlateLookup.beforeRouteEnter.call(
         wrapper.vm,
@@ -107,31 +95,31 @@ describe("license-plate-lookup.vue", () => {
         undefined,
         (c) => c(wrapper.vm)
       );
-  
+
       wrapper.vm.backButtonAction();
-  
+
       //Assert
       expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
     });
 
     describe("on forwardButtonAction click", () => {
-      test("Navigate forward should be called and isCarId should be set to false when data entered matches store data on forwardButtonAction click", async () => {
-
+      test("Navigate forward should be called and isCarIdDifferent should be set to false when data entered matches store data on forwardButtonAction click", async () => {
         // Arrange
         const { wrapper } = setupMocks({});
-    
+        const mockCarId = "TESTID";
+        store.commit(storeMutations.UPDATE_GLASS_TO_REPLACE, []);
+        store.commit(storeMutations.UPDATE_CAR_ID, mockCarId);
+
         wrapper.vm.validateZip = jest.fn().mockImplementation(() => {
           return { data: { isServiceable: true } };
         });
-        wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {
-          return '';
-        });
-        const vinLookup = { data: { vehicle: { carId: "TESTID" } } }
+        wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => "");
+        const vinLookup = { data: { vehicle: { carId: mockCarId } } }
         wrapper.vm.lookupVin = jest.fn().mockImplementation(() => {
-          return { catch: () => vinLookup };
+          return new Promise(resolve => resolve(vinLookup));
         });
         wrapper.vm.navigateForward = jest.fn();
-    
+
         //Act
         licensePlateLookup.beforeRouteEnter.call(
           wrapper.vm,
@@ -139,25 +127,24 @@ describe("license-plate-lookup.vue", () => {
           undefined,
           (c) => c(wrapper.vm)
         );
-    
+
         await wrapper.vm.forwardButtonAction();
-    
+
         //Assert
-        expect(wrapper.vm.navigateForward).toHaveBeenCalled();
         expect(wrapper.vm.isCarIdDifferent).toEqual(false);
+        expect(wrapper.vm.navigateForward).toHaveBeenCalled();
       });
 
       test("Function should stop and datam isRegistrationZipServicable should be set to false when service zip entered returns false on forwardButtonAction click", async () => {
         // Arrange
         const { wrapper } = setupMocks({});
-    
+
         wrapper.vm.validateZip = jest.fn().mockImplementation(() => {
           return { data: { isServiceable: false } };
         });
         wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {
           return '';
         });
-        wrapper.vm.$refs.funnelFooter.removeLoader = jest.fn();
 
         //Act
         licensePlateLookup.beforeRouteEnter.call(
@@ -166,9 +153,9 @@ describe("license-plate-lookup.vue", () => {
           undefined,
           (c) => c(wrapper.vm)
         );
-    
+
         await wrapper.vm.forwardButtonAction();
-    
+
         //Assert
         expect(wrapper.vm.isRegistrationZipServicable).toEqual(false);
       });
@@ -176,7 +163,8 @@ describe("license-plate-lookup.vue", () => {
       test("Function should stop and datam isCarIdDifferent should be set to true when carId entered doesn't match store carId or previously entered carId on forwardButtonAction click", async () => {
         // Arrange
         const { wrapper } = setupMocks({});
-    
+        store.commit(storeMutations.UPDATE_GLASS_TO_REPLACE, []);
+
         wrapper.vm.validateZip = jest.fn().mockImplementation(() => {
           return { data: { isServiceable: true } };
         });
@@ -185,11 +173,9 @@ describe("license-plate-lookup.vue", () => {
         });
         const vinLookup = { data: { vehicle: { carId: "TESTID1" } } }
         wrapper.vm.lookupVin = jest.fn().mockImplementation(() => {
-          return { catch: () => vinLookup };
+          return new Promise(resolve => resolve(vinLookup));
         });
-        wrapper.vm.$refs.funnelFooter.removeLoader = jest.fn();
-        wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
-    
+
         //Act
         licensePlateLookup.beforeRouteEnter.call(
           wrapper.vm,
@@ -197,9 +183,9 @@ describe("license-plate-lookup.vue", () => {
           undefined,
           (c) => c(wrapper.vm)
         );
-    
+
         await wrapper.vm.forwardButtonAction();
-    
+
         //Assert
         expect(wrapper.vm.isCarIdDifferent).toEqual(true);
       });
@@ -208,7 +194,7 @@ describe("license-plate-lookup.vue", () => {
 
         // Arrange
         const { wrapper } = setupMocks({});
-    
+
         wrapper.vm.validateZip = jest.fn().mockImplementation(() => {
           return { data: { isServiceable: true } };
         });
@@ -217,11 +203,11 @@ describe("license-plate-lookup.vue", () => {
         });
         const vinLookup = { data: { vehicle: { carId: "TESTID1" } } }
         wrapper.vm.lookupVin = jest.fn().mockImplementation(() => {
-          return { catch: () => vinLookup };
+          return new Promise(resolve => resolve(vinLookup));
         });
         wrapper.vm.previouslyEnteredCarId = "TESTID1";
         wrapper.vm.navigateForward = jest.fn();
-    
+
         //Act
         licensePlateLookup.beforeRouteEnter.call(
           wrapper.vm,
@@ -229,9 +215,9 @@ describe("license-plate-lookup.vue", () => {
           undefined,
           (c) => c(wrapper.vm)
         );
-    
+
         await wrapper.vm.forwardButtonAction();
-    
+
         //Assert
         expect(wrapper.vm.navigateForward).toHaveBeenCalled();
         expect(wrapper.vm.isCarIdDifferent).toEqual(true);
@@ -243,7 +229,7 @@ describe("license-plate-lookup.vue", () => {
 
         // Arrange
         const { wrapper } = setupMocks({});
-    
+
         //Act
         wrapper.vm.isCarIdDifferent = true;
         wrapper.vm.isSelectedGlassAvailableForVehicle = false;
@@ -252,9 +238,9 @@ describe("license-plate-lookup.vue", () => {
           return '';
         });
         store.dispatch = jest.fn();
-    
+
         await wrapper.vm.navigateForward();
-    
+
         //Assert
         expect(wrapper.vm.$router.navigateAfterSave).toHaveBeenCalled();
       });
@@ -263,16 +249,15 @@ describe("license-plate-lookup.vue", () => {
 
         // Arrange
         const { wrapper } = setupMocks({});
-    
+
         //Act
         wrapper.vm.isCarIdDifferent = false;
-        wrapper.vm.$refs.loadingModal.showModal = jest.fn();
         wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {
           return '';
         });
         navigateToHeritage.navigateAfterSaveToHeritageFunnel = jest.fn();
         await wrapper.vm.navigateForward();
-    
+
         //Assert
         expect(navigateToHeritage.navigateAfterSaveToHeritageFunnel).toHaveBeenCalled();
       });
@@ -284,13 +269,12 @@ describe("license-plate-lookup.vue", () => {
 
       // Arrange
       const { wrapper } = setupMocks({});
-  
+
       //Act
       wrapper.vm.licensePlate = "NEWPLATE";
       wrapper.vm.getCmsContent = jest.fn();
-      wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
       await wrapper.vm.$nextTick();
-  
+
       //Assert
       expect(wrapper.vm.$refs.funnelFooter.updateButtonText).toHaveBeenCalled();
     });
@@ -299,13 +283,12 @@ describe("license-plate-lookup.vue", () => {
 
       // Arrange
       const { wrapper } = setupMocks({});
-  
+
       //Act
       wrapper.vm.registrationZip = "55555";
       wrapper.vm.getCmsContent = jest.fn();
-      wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
       await wrapper.vm.$nextTick();
-  
+
       //Assert
       expect(wrapper.vm.$refs.funnelFooter.updateButtonText).toHaveBeenCalled();
     });
@@ -314,23 +297,159 @@ describe("license-plate-lookup.vue", () => {
 
       // Arrange
       const { wrapper } = setupMocks({});
-  
+
       //Act
       wrapper.vm.serviceZip = "55555";
       wrapper.vm.getCmsContent = jest.fn();
-      wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
       await wrapper.vm.$nextTick();
-  
+
       //Assert
       expect(wrapper.vm.$refs.funnelFooter.updateButtonText).toHaveBeenCalled();
     });
   })
 
+  describe("saving registrationZip and serviceZip on continue", () => {
+    test("registrationZip is serviceable and vehicle match is found => sets service zip/state to registration zip/state", async () => {
+      // Arrange
+      const { wrapper } = setupMocks({});
+      const mockCarId = "TESTID";
+      store.commit(storeMutations.UPDATE_GLASS_TO_REPLACE, []);
+      store.commit(storeMutations.UPDATE_CAR_ID, mockCarId)
+      wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => "");
+      wrapper.vm.validateZip = jest.fn().mockImplementation((zip) => {
+        if (zip)
+          return { data: { isServiceable: true, state: "OH" } };
+        return
+      });
+      const vinLookup = { data: { vehicle: { carId: mockCarId } } }
+      wrapper.vm.lookupVin = jest.fn().mockImplementation(() => new Promise(resolve => resolve(vinLookup)));
+
+      await wrapper.setData({ registrationZip: "00000" });
+      navigateToHeritage.navigateAfterSaveToHeritageFunnel = jest.fn();
+
+      // Act
+      await wrapper.vm.forwardButtonAction();
+
+      // Assert
+      expect(store.getters.order.serviceLocation.zipCode).toEqual(store.getters.vehicle.registration.zipCode);
+      expect(store.getters.vehicle.registration.zipCode).toEqual("00000");
+      expect(store.getters.order.serviceLocation.zipCode).toEqual("00000");
+    })
+
+    test("vehicle match is found but registrationZip is not serviceable => shows service zip/state field", async () => {
+      // Arrange
+      const { wrapper } = setupMocks({});
+      wrapper.vm.validateZip = jest.fn().mockImplementation(() => {
+        return { data: { isServiceable: false, state: "XX" } };
+      });
+
+      await wrapper.setData({ registrationZip: "00000" });
+      navigateToHeritage.navigateAfterSaveToHeritageFunnel = jest.fn();
+
+      // Act
+      await wrapper.vm.forwardButtonAction();
+
+      // Assert
+      const serviceZipField = wrapper.findComponent("[cmsWidgetName='ServiceZip']");
+      expect(serviceZipField.exists()).toBe(true);
+      expect(serviceZipField.isVisible()).toBe(true);
+    })
+
+    test("registrationZip is not serviceable so serviceZip field is shown, continue clicked => user cannot continue", async () => {
+      // Arrange
+      const { wrapper } = setupMocks({});
+      wrapper.vm.validateZip = jest.fn().mockImplementation(() => {
+        return { data: { isServiceable: false, state: "XX" } };
+      });
+
+      await wrapper.setData({ registrationZip: "00000" });
+      navigateToHeritage.navigateAfterSaveToHeritageFunnel = jest.fn();
+      await wrapper.vm.forwardButtonAction();
+      wrapper.vm.$router.navigateAfterSave = jest.fn();
+      // At this point, serviceZip field is shown
+
+      // Act
+      // Continue without entering anything into service zip field
+      await wrapper.vm.forwardButtonAction();
+
+      // Assert      
+      const serviceZipField = wrapper.findComponent("[cmsWidgetName='ServiceZip']");
+      expect(serviceZipField.exists()).toBe(true);
+      expect(serviceZipField.isVisible()).toBe(true); 3
+      expect(navigateToHeritage.navigateAfterSaveToHeritageFunnel).not.toHaveBeenCalled();
+      expect(wrapper.vm.$router.navigateAfterSave).not.toHaveBeenCalled();
+    });
+
+    test("registrationZip is not serviceable so serviceZip field is shown, user enters serviceZip => user can continue", async () => {
+      // Arrange
+      const { wrapper } = setupMocks({});
+      const registrationZip = "00000";
+      const serviceZip = "99999";
+      const mockCarId = "TestCarId";
+      store.commit(storeMutations.UPDATE_CAR_ID, mockCarId);
+      wrapper.vm.validateZip = jest.fn().mockImplementation((zip) => {
+        return { data: { isServiceable: zip == registrationZip ? false : true, state: "XX" } };
+      });
+      const vinLookup = { data: { vehicle: { carId: mockCarId } } }
+      wrapper.vm.lookupVin = jest.fn().mockImplementation(() => {
+        return new Promise(resolve => resolve(vinLookup));
+      });
+      wrapper.vm.navigateForward = jest.fn();
+      await wrapper.setData({ registrationZip: registrationZip });
+      await wrapper.vm.forwardButtonAction();
+      // At this point, serviceZip field is shown
+
+      await wrapper.setData({ serviceZip: serviceZip });
+
+      // Act
+      // Continue after entering input into service zip field
+      await wrapper.vm.forwardButtonAction();
+
+      // Assert      
+      const serviceZipField = wrapper.findComponent("[cmsWidgetName='ServiceZip']");
+      expect(serviceZipField.exists()).toBe(true);
+      expect(serviceZipField.isVisible()).toBe(true);
+      expect(wrapper.vm.navigateForward).toHaveBeenCalled();
+    });
+
+    test("registrationZip is not serviceable so serviceZip field is shown, user enters serviceZip => service and registration zips/states saved", async () => {
+      // Arrange
+      const { wrapper } = setupMocks({});
+      const registrationZip = "00000";
+      const serviceZip = "99999";
+      const mockCarId = "TestCarId";
+      store.commit(storeMutations.UPDATE_CAR_ID, mockCarId);
+      wrapper.vm.validateZip = jest.fn().mockImplementation((zip) => {
+        return { data: { isServiceable: zip == registrationZip ? false : true, state: "XX" } };
+      });
+      const vinLookup = { data: { vehicle: { carId: mockCarId } } }
+      wrapper.vm.lookupVin = jest.fn().mockImplementation(() => {
+        return new Promise(resolve => resolve(vinLookup));
+      });
+      wrapper.vm.navigateForward = jest.fn();
+      await wrapper.setData({ registrationZip: registrationZip });
+      await wrapper.vm.forwardButtonAction();
+      // At this point, serviceZip field is shown
+
+      await wrapper.setData({ serviceZip: serviceZip });
+
+      // Act
+      // Continue after entering value into service zip field
+      await wrapper.vm.forwardButtonAction();
+
+      // Assert      
+      expect(store.getters.vehicle.registration.zipCode).toEqual(registrationZip);
+      expect(store.getters.order.serviceLocation.zipCode).toEqual(serviceZip);
+      expect(wrapper.vm.navigateForward).toHaveBeenCalled();
+    });
+  })
+
   describe("miscellaneous", () => {
     test("CarId set, arePagePrerequisitesValid should be true ", async () => {
       //Arrange
       const { wrapper } = setupMocks({});
-    
+      store.commit(storeMutations.UPDATE_CAR_ID, "TESTCARID");
+
       //Act
       licensePlateLookup.beforeRouteEnter.call(
         wrapper.vm,
@@ -338,10 +457,10 @@ describe("license-plate-lookup.vue", () => {
         undefined,
         (c) => c(wrapper.vm)
       );
-    
+
       let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
       await nextTick();
-    
+
       //Assert
       expect(arePagePrerequisitesValid).toBe(true);
     });
@@ -350,7 +469,7 @@ describe("license-plate-lookup.vue", () => {
 
       // Arrange
       const { wrapper } = setupMocks({});
-  
+
       //Act
       wrapper.vm.isCarIdDifferent = true;
       wrapper.vm.isSelectedGlassAvailableForVehicle = false;
@@ -359,23 +478,23 @@ describe("license-plate-lookup.vue", () => {
       });
       store.commit = jest.fn();
       store.dispatch = jest.fn();
-  
+
       const vehicleInfo = { year: "2020", make: "honda", model: "civic", style: "2 door", carId: "TestId", category: "testCat", imageUrl: "image.jpg", imageVifNumber: "123", imageColor: "blue" }
       await wrapper.vm.updateCustomerInfo('vin', vehicleInfo, 'registrationState');
-  
+
       //Assert
       expect(store.dispatch).toHaveBeenCalled();
-    });
+    })
 
     test("dispatch non blocking store action called on validate zip", async () => {
 
       // Arrange
       const { wrapper } = setupMocks({});
-  
+
       //Act
       await wrapper.vm.validateZip("12345");
-  
-  
+
+
       //Assert
       expect(baseMixin.methods.dispatchStoreAction).toHaveBeenCalled();
     });
@@ -384,11 +503,11 @@ describe("license-plate-lookup.vue", () => {
 
       // Arrange
       const { wrapper } = setupMocks({});
-  
+
       //Act
       await wrapper.vm.lookupVin("zzz123fqsfwg");
-  
-  
+
+
       //Assert
       expect(baseMixin.methods.dispatchStoreAction).toHaveBeenCalled();
     });
@@ -401,10 +520,9 @@ function setupMocks({
     router: {
       navigate: jest.fn(),
     },
-    licensePlate: "TESTPLATE",
-    registrationZip: "12345"
   },
 }) {
+  store.commit(storeMutations.RESET_STATE);
   //Mock api responses
   baseMixin.methods.dispatchStoreAction = jest.fn();
   const apiResponses = {
@@ -426,13 +544,16 @@ function setupMocks({
   settleAllPromises.mockImplementation(() => apiPromise);
   fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
 
-
   const mountOptions = getMountOptions(mountOptionsMockData);
   mountOptions['attachTo'] = document.body; // append wrapper to document.body to test DOM methods
 
   const wrapper = shallowMount(licensePlateLookup, mountOptions);
 
   wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
+  wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => "");
+  wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
+  wrapper.vm.$refs.funnelFooter.removeLoader = jest.fn();
+  wrapper.vm.$refs.loadingModal.showModal = jest.fn();
 
   return { wrapper, apiPromise };
 }

From a9817400c05bced0dc89b448e37d751de9a05815 Mon Sep 17 00:00:00 2001
From: Katie <katie.oh@safelite.com>
Date: Tue, 31 May 2022 15:11:45 -0400
Subject: [PATCH 23/32] CSR-628 Cleanup

---
 src/layouts/license-plate-lookup/license-plate-lookup.spec.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.spec.js b/src/layouts/license-plate-lookup/license-plate-lookup.spec.js
index a6c919713..44ab645dd 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.spec.js
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.spec.js
@@ -6,13 +6,11 @@ import { settleAllPromises } from "@/helpers/layout-helper.js";
 import * as navigateToHeritage from "@/helpers/heritage-integration/navigation-helper";
 import baseMixin from "@/mixins/base-mixin";
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
-import { shallowMount, flushPromises, mount } from "@vue/test-utils";
+import { shallowMount } from "@vue/test-utils";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import { nextTick } from "vue";
 import { storeMutations } from "@/constants/store-mutations";
-import errorMessages from "@/constants/error-messages";
 import store from "@/store";
-import router from "../../router";
 
 jest.mock('@/assets/img/loader.gif', () => 'loader.gif')
 jest.mock('@/assets/img/windshield.png', () => 'windshield.png')

From 298da3b24deecbb755dc50d95b08121905b6d643 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 31 May 2022 16:04:42 -0400
Subject: [PATCH 24/32] Footer modal updates.

---
 .../footer-menu-modal/footer-menu-modal.vue   |  52 --------
 .../funnel-footer/funnel-footer.vue           |  28 ++---
 .../funnel-header/funnel-header.vue           |  12 +-
 .../menu-button/menu-button.spec.js           |   1 -
 .../menu-button/menu-button.vue               |  65 ----------
 .../menu-modal.spec.js}                       |   0
 .../menu-modal/menu-modal.vue                 | 116 ++++++++++++++++++
 src/layouts/component-test/component-test.vue |   6 +-
 src/mixins/base-mixin.js                      |   4 +-
 9 files changed, 134 insertions(+), 150 deletions(-)
 delete mode 100644 src/common-components/footer-menu-modal/footer-menu-modal.vue
 delete mode 100644 src/common-components/menu-button/menu-button.spec.js
 delete mode 100644 src/common-components/menu-button/menu-button.vue
 rename src/common-components/{footer-menu-modal/footer-menu-modal.spec.js => menu-modal/menu-modal.spec.js} (100%)
 create mode 100644 src/common-components/menu-modal/menu-modal.vue

diff --git a/src/common-components/footer-menu-modal/footer-menu-modal.vue b/src/common-components/footer-menu-modal/footer-menu-modal.vue
deleted file mode 100644
index 929461a53..000000000
--- a/src/common-components/footer-menu-modal/footer-menu-modal.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<template>
-  <!-- Modal -->
-  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-fullscreen">
-      <div class="modal-content">
-        <div class="modal-body d-flex flex-column">
-          <textLink linkType="navigation" text="Terms of use" href="https://www.safelite.com/terms-of-use" />
-          <textLink linkType="navigation" text="Privacy policy" href="https://www.safelite.com/safelite-group-privacy-policy" />
-          <textLink linkType="navigation" text="Do not sell my information" href="https://privacyportal-cdn.onetrust.com/dsarwebform/d3b95a93-e22e-4d4d-a806-482052406557/9e371601-eae3-4338-9430-b90b9036022b.html" />
-        </div>
-        <div class="modal-footer d-flex justify-content-start">
-          &copy; {{new Date().getFullYear()}} Safelite Group
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import textLink from "@/ux-components/text-link/text-link";
-export default {
-  name: 'footerMenuModal',
-  components: {
-    textLink,
-  },
-}
-</script>
-
-<style lang="scss">
-.modal {
-  max-width: 576px;
-  left: auto;
-  height: calc(100% - 72px);
-  top: 72px;
-  border-top: 1px solid $gray-300;
-  .modal-body {
-    padding: 2rem;
-  }
-    .modal-fullscreen {
-      width: 100vw;
-      max-width: 576px;
-  }
-  .navigation-link {
-    margin-bottom: 1.5rem;
-  }
-  .modal-footer {
-    border-top: none;
-    padding: 2rem;
-  }
-  //.modal-backdrop styles are in common-styles.scss
-}
-</style>
diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue
index 4e7ce11c4..fb07779f0 100644
--- a/src/common-components/funnel-footer/funnel-footer.vue
+++ b/src/common-components/funnel-footer/funnel-footer.vue
@@ -1,21 +1,6 @@
 <template>
-  <footer class="footer pt-4">
-    <div class="container-fluid g-2">
-      <div class="row">
-        <div class="col-12 d-flex justify-content-center pb-2 fs-7">
-          &copy;&nbsp;{{new Date().getFullYear()}}&nbsp;Safelite Group
-        </div>
-      </div>
-      <div class="row" :style="`padding-bottom: ${paddingHeight}px`">
-        <div class="col d-flex justify-content-center justify-content-around text-center">
-          <textLink linkType="footer" text="Terms of use" href="https://www.safelite.com/terms-of-use" />
-          <textLink linkType="footer" text="Privacy policy" href="https://www.safelite.com/safelite-group-privacy-policy" />
-          <textLink linkType="footer" text="Do not sell my information" href="https://privacyportal-cdn.onetrust.com/dsarwebform/d3b95a93-e22e-4d4d-a806-482052406557/9e371601-eae3-4338-9430-b90b9036022b.html" />
-        </div>
-      </div>
-    </div>
-    <div class="container-fluid fixed-bottom g-5 bg-light py-4" id="infoBox">
-      <div class="row d-flex flex-row-reverse align-items-center">
+    <footer class="footer container-fluid fixed-bottom g-5 bg-light py-4" id="infoBox">
+      <div class="row d-flex flex-row-reverse align-items-center vw-100">
         <div class="col button-col d-flex" id="stacked">
           <buttonMain
             ref="buttonMain"
@@ -26,6 +11,7 @@
             :aria-disabled="isForwardActionDisabled"
             :isDisabled="isForwardActionDisabled"
             @click-event="buttonClick"
+            data-bs-target="#footerModal"
             data-bs-dismiss="modal"
           />
         </div>
@@ -35,11 +21,11 @@
             :text="backLink"
             @click-event="linkClick"
             href="javascript:void(0)"
+            data-bs-target="#footerModal"
             data-bs-dismiss="modal"
           />
         </div>
       </div>
-    </div>
   </footer>
 </template>
 
@@ -77,12 +63,15 @@ export default {
     document.onkeydown = null;
   },
   computed: {
+    height () {
+      return this.$refs.infoBox.clientHeight;
+    },
     backLink(){
       return this.getCmsContent(this.cmsWidgetName, 'BackButtonText');
     },
     buttonText(){
       return this.customButtontext ? this.customButtontext : this.getCmsContent(this.cmsWidgetName, 'ForwardButtonText');
-    }
+    },
   },
   methods: {
     onResize() {
@@ -114,7 +103,6 @@ export default {
 <style lang="scss" scoped>
 .footer {
   display: flex;
-  margin-top: auto;
   a {
     display: flex;
     justify-content: center;
diff --git a/src/common-components/funnel-header/funnel-header.vue b/src/common-components/funnel-header/funnel-header.vue
index 7f477380d..24e6c53c1 100644
--- a/src/common-components/funnel-header/funnel-header.vue
+++ b/src/common-components/funnel-header/funnel-header.vue
@@ -4,8 +4,7 @@
     v-if="imageSrc"
   >
     <img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
-    <menuButton/>
-    <footerMenuModal/>
+    <menuModal/>
   </div>
   <alert
     class="position-absolute rounded-0 w-100 border-0 shadow-sm"
@@ -21,14 +20,14 @@
 import alert from "@/ux-components/alert/alert";
 import eventBus from "@/helpers/event-bus/event-bus";
 import { globalEvents } from "@/constants/events";
-import menuButton from "@/common-components/menu-button/menu-button";
-import footerMenuModal from "@/common-components/footer-menu-modal/footer-menu-modal";
+import menuModal from "@/common-components/menu-modal/menu-modal";
 
 export default {
   name: "funnel-header",
   data() {
     return {
       displayGlobalAlert: false,
+      headerHeight: 0,
       globalAlertMessage: {
         isDismissible: false,
         messageCopy: "",
@@ -47,8 +46,7 @@ export default {
   },
   components: {
     alert,
-    menuButton,
-    footerMenuModal,
+    menuModal,
   },
   mounted() {
     // Check if alert event is on the bus
@@ -56,7 +54,6 @@ export default {
       globalEvents.Categories.GLOBAL_ALERT,
       globalEvents.SubCategories.PAGE_NOT_FOUND
     );
-
     // If alert event is on the bus, then display the alert
     if (alertEvent !== undefined) {
       this.displayGlobalAlert = true;
@@ -76,5 +73,6 @@ export default {
 }
 .alert {
   left: 0;
+  top: 72px;
 }
 </style>
diff --git a/src/common-components/menu-button/menu-button.spec.js b/src/common-components/menu-button/menu-button.spec.js
deleted file mode 100644
index 3d0843e10..000000000
--- a/src/common-components/menu-button/menu-button.spec.js
+++ /dev/null
@@ -1 +0,0 @@
-test.todo("some test to be written in the future");
diff --git a/src/common-components/menu-button/menu-button.vue b/src/common-components/menu-button/menu-button.vue
deleted file mode 100644
index 477ad4989..000000000
--- a/src/common-components/menu-button/menu-button.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-  <div class="menu-button-container">
-    <button class="menu-button" type="button" :class="[isActive ? 'active' : '']" @click="toggleClass()" data-bs-toggle="modal" data-bs-target="#exampleModal">
-      <div class="bar1"></div>
-      <div class="bar2"></div>
-      <div class="bar3"></div>
-    </button>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'menuButton',
-  data() {
-    return {
-      isActive: false,
-    };
-  },
-  methods: {
-    toggleClass: function(event){
-      this.isActive = !this.isActive;
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.menu-button-container {
-  position: absolute;
-  top: 1.47rem;
-  right: 1.47rem;
-  button {
-    border: none;
-    &.menu-button {
-      width: 1.5rem;
-      height: 1.5rem;
-      border-radius: 50%;
-      box-shadow: 0 2px 8px 0 rgba(0,0,0,0.2);
-      background-color: $white;
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      z-index: 1056;
-      .bar1,
-      .bar2,
-      .bar3 {
-        width: 14px;
-        height: 2px;
-        background-color: $blue-400;
-        margin: 1px 0;
-        transition: 0.25s;
-      }
-      &.active .bar1 {
-        transform: rotate(-45deg) translate(-3px, 3px);
-      }
-      &.active .bar2 {opacity: 0;}
-      &.active .bar3 {
-        transform: rotate(45deg) translate(-3px, -3px);
-      }
-    }
-  }
-}
-</style>
diff --git a/src/common-components/footer-menu-modal/footer-menu-modal.spec.js b/src/common-components/menu-modal/menu-modal.spec.js
similarity index 100%
rename from src/common-components/footer-menu-modal/footer-menu-modal.spec.js
rename to src/common-components/menu-modal/menu-modal.spec.js
diff --git a/src/common-components/menu-modal/menu-modal.vue b/src/common-components/menu-modal/menu-modal.vue
new file mode 100644
index 000000000..905c17b63
--- /dev/null
+++ b/src/common-components/menu-modal/menu-modal.vue
@@ -0,0 +1,116 @@
+<template>
+  <div class="menu-modal-container">
+    <button class="menu-button" type="button" :class="[isActive ? 'active' : '']" data-bs-toggle="modal" data-bs-target="#footerModal">
+      <div class="bar1"></div>
+      <div class="bar2"></div>
+      <div class="bar3"></div>
+    </button>
+  </div>
+  <!-- Modal -->
+  <div class="modal fade" id="footerModal" tabindex="-1" aria-labelledby="footerModalLabel" aria-hidden="true" :style="`height: calc(100% - ${currentFooterAndHeaderHeight}px);`">
+    <div class="modal-dialog modal-fullscreen">
+      <div class="modal-content">
+        <div class="modal-header visually-hidden">
+          <h5 class="modal-title" id="footerModalLabel">Footer Navigation</h5>
+        </div>
+        <div class="modal-body d-flex flex-column">
+          <textLink linkType="navigation" text="Terms of use" href="https://www.safelite.com/terms-of-use" />
+          <textLink linkType="navigation" text="Privacy policy" href="https://www.safelite.com/safelite-group-privacy-policy" />
+          <textLink linkType="navigation" text="Do not sell my information" href="https://privacyportal-cdn.onetrust.com/dsarwebform/d3b95a93-e22e-4d4d-a806-482052406557/9e371601-eae3-4338-9430-b90b9036022b.html" />
+        </div>
+        <div class="modal-footer d-flex justify-content-start">
+          &copy; {{new Date().getFullYear()}} Safelite Group
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import textLink from "@/ux-components/text-link/text-link";
+export default {
+  name: 'menuModal',
+  data() {
+    return {
+      isActive: false,
+      currentFooterAndHeaderHeight: 0,
+    };
+  },
+  mounted() {
+    const myModalEl = document.getElementById('footerModal');
+    var self = this;
+    myModalEl.addEventListener('hide.bs.modal', function (event) {
+      self.isActive = false;
+    });
+    myModalEl.addEventListener('show.bs.modal', function (event) {
+      self.isActive = true;
+      self.currentFooterAndHeaderHeight = self.getFooterInfoBoxHeight() + 72;
+    })
+  },
+  components: {
+    textLink,
+  }
+}
+</script>
+
+<style lang="scss">
+.menu-modal-container {
+  position: absolute;
+  padding: 1.47rem 1rem 1.47rem 1.47rem;
+  right: 0;
+  button {
+    border: none;
+    &.menu-button {
+      width: 1.5rem;
+      height: 1.5rem;
+      border-radius: 50%;
+      box-shadow: 0 2px 8px 0 rgba(0,0,0,0.2);
+      background-color: $white;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      z-index: 1056;
+      .bar1,
+      .bar2,
+      .bar3 {
+        width: 14px;
+        height: 2px;
+        background-color: $blue-400;
+        margin: 1px 0;
+        transition: 0.25s;
+      }
+      &.active .bar1 {
+        transform: rotate(-45deg) translate(-3px, 3px);
+      }
+      &.active .bar2 {opacity: 0;}
+      &.active .bar3 {
+        transform: rotate(45deg) translate(-3px, -3px);
+      }
+    }
+  }
+}
+.modal {
+  max-width: 576px;
+  left: auto;
+  height: calc(100% - 72px);
+  top: 72px;
+  border-top: 1px solid $gray-300;
+  .modal-body {
+    padding: 2rem;
+  }
+    .modal-fullscreen {
+      width: 100vw;
+      max-width: 576px;
+  }
+  .navigation-link {
+    margin-bottom: 1.5rem;
+  }
+  .modal-footer {
+    border-top: none;
+    padding: 2rem;
+  }
+  //.modal-backdrop styles are in common-styles.scss
+}
+</style>
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 268351417..9cc376249 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -7,7 +7,7 @@
       </div>
       <div class="row my-2">
         <div class="col">
-          <menuButton/>
+          <menuModal/>
         </div>
       </div>
       <div class="row my-4">
@@ -1089,7 +1089,7 @@
   import textboxQuestion from "@/common-components/textbox-question/textbox-question";
   import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question";
   import vinInformation from "@/layouts/vin-lookup/vin-information/vin-information";
-  import menuButton from "@/common-components/menu-button/menu-button";
+  import menuModal from "@/common-components/menu-modal/menu-modal";
   export default {
     name: "App",
     components: {
@@ -1104,7 +1104,7 @@
       textboxQuestion,
       dropdownQuestion,
       vinInformation,
-      menuButton,
+      menuModal,
     },
     data() {
       return {
diff --git a/src/mixins/base-mixin.js b/src/mixins/base-mixin.js
index d0474d67b..0a30524ec 100644
--- a/src/mixins/base-mixin.js
+++ b/src/mixins/base-mixin.js
@@ -43,9 +43,9 @@ export default {
       }
     },
     getFooterInfoBoxHeight() {
-      const footerInfoBox = document.querySelector(".footer #infoBox");
+      const footerInfoBox = document.querySelector(".footer#infoBox");
       return footerInfoBox ? footerInfoBox.offsetHeight : 0;
-    }
+    },
   },
   computed: {
     storeActions() {

From 07c12f4d8be5272f20814c8c057813cace3afa74 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 31 May 2022 16:58:12 -0400
Subject: [PATCH 25/32] Temporarily exclude menu-modal from unit tests. Remove
 un-needed code.

---
 jest.config.js                                |  1 +
 .../funnel-footer/funnel-footer.spec.js       | 28 ++-----------------
 .../funnel-footer/funnel-footer.vue           |  3 --
 .../funnel-header/funnel-header.vue           |  1 -
 .../menu-modal/menu-modal.vue                 |  2 +-
 src/layouts/vehicle-damage/vehicle-damage.vue |  2 +-
 6 files changed, 5 insertions(+), 32 deletions(-)

diff --git a/jest.config.js b/jest.config.js
index 839db4378..afe4a8e0e 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -29,6 +29,7 @@ module.exports = {
     "!src/common-components/textbox-question/textbox-question.vue",
     "!src/ux-components/alert\alert.vue",
     "!src/helpers/validation-rules.js",
+    "!src/common-components/menu-modal/menu-modal.vue",
     // END
   ], // ! means exclude from coverage.
   testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
diff --git a/src/common-components/funnel-footer/funnel-footer.spec.js b/src/common-components/funnel-footer/funnel-footer.spec.js
index 198fa5657..d246b602b 100644
--- a/src/common-components/funnel-footer/funnel-footer.spec.js
+++ b/src/common-components/funnel-footer/funnel-footer.spec.js
@@ -3,30 +3,6 @@ import funnelFooter from "./funnel-footer";
 
 describe("funnel-footer.vue", () => {
 
-  it("Should return footer-link class", async () => {
-    // Act
-      const r = {
-        test:"testing",
-        clientHeight: 10,
-        offsetHeight: 24,
-      };
-
-      global.document.querySelector = jest.fn().mockImplementation(()=> {
-        return r;
-      });
-
-      const wrapper = mount(funnelFooter, {
-        mixins: [mockMixin]
-      });
-
-      // Assert
-      const link = wrapper.find("a");
-
-      // Expect
-      expect(link.attributes('class')).toContain("footer");
-
-  });
-
   it("Should emit ForwardClicked on button click", async () => {
     // Act
     const wrapper = mount(funnelFooter, {
@@ -53,7 +29,7 @@ describe("funnel-footer.vue", () => {
       mixins: [mockMixin]
     });
     wrapper.vm.updateButtonText('newText');
-    
+
     // Assert
     expect(wrapper.componentVM.customButtontext).toBe('newText');
   });
@@ -65,4 +41,4 @@ const mockMixin = {
     getCmsContent: jest.fn(),
     getFooterInfoBoxHeight: jest.fn(()=>80)
   }
-}
\ No newline at end of file
+}
diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue
index fb07779f0..ab4796325 100644
--- a/src/common-components/funnel-footer/funnel-footer.vue
+++ b/src/common-components/funnel-footer/funnel-footer.vue
@@ -63,9 +63,6 @@ export default {
     document.onkeydown = null;
   },
   computed: {
-    height () {
-      return this.$refs.infoBox.clientHeight;
-    },
     backLink(){
       return this.getCmsContent(this.cmsWidgetName, 'BackButtonText');
     },
diff --git a/src/common-components/funnel-header/funnel-header.vue b/src/common-components/funnel-header/funnel-header.vue
index 24e6c53c1..2244a52ab 100644
--- a/src/common-components/funnel-header/funnel-header.vue
+++ b/src/common-components/funnel-header/funnel-header.vue
@@ -27,7 +27,6 @@ export default {
   data() {
     return {
       displayGlobalAlert: false,
-      headerHeight: 0,
       globalAlertMessage: {
         isDismissible: false,
         messageCopy: "",
diff --git a/src/common-components/menu-modal/menu-modal.vue b/src/common-components/menu-modal/menu-modal.vue
index 905c17b63..de26738f0 100644
--- a/src/common-components/menu-modal/menu-modal.vue
+++ b/src/common-components/menu-modal/menu-modal.vue
@@ -43,8 +43,8 @@ export default {
       self.isActive = false;
     });
     myModalEl.addEventListener('show.bs.modal', function (event) {
-      self.isActive = true;
       self.currentFooterAndHeaderHeight = self.getFooterInfoBoxHeight() + 72;
+      self.isActive = true;
     })
   },
   components: {
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 557de9dae..d4e44feb7 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -5,7 +5,7 @@
       ref="theForm"
       v-slot="{ meta }"
     >
-      <div class="page-container-grouped-styles has-footer">
+      <div class="page-container-grouped-styles">
         <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
         <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage=false />
         <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />

From 855e3acc9d868023a9de58f072d68707e961885f Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Wed, 1 Jun 2022 08:26:30 -0400
Subject: [PATCH 26/32] CSR-347: return out of forwardButtonAction if no
 lookupVin found / remove unused var

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

diff --git a/src/layouts/address-vehicles/address-vehicles.vue b/src/layouts/address-vehicles/address-vehicles.vue
index 34937bfb7..dc2e53484 100644
--- a/src/layouts/address-vehicles/address-vehicles.vue
+++ b/src/layouts/address-vehicles/address-vehicles.vue
@@ -162,8 +162,10 @@ export default {
     async forwardButtonAction() {
       const vinLookup = await this.lookupVin(this.selectedVehicle.vin).catch(() => {
         this.$refs.funnelFooter.removeLoader();
-        return;
       });
+      if (!vinLookup) {
+        return;
+      }
       this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(vinLookup.data.carId);
       this.updateCustomerInfo(this.selectedVehicle.vin, this.selectedVehicle.vehicle);
       this.navigateForward();
@@ -210,7 +212,7 @@ export default {
   },
 
   watch: {
-    selectedVehicleVin(vehicleVin) {
+    selectedVehicleVin() {
       // does this vehicle match the previously selected carId?
       this.isCarIdDifferent = this.selectedVehicle.vehicle.carId !== store.getters.vehicle.carId;
       this.$refs.funnelFooter.updateButtonText(`Continue with ${this.selectedVehicle.vehicle.year} ${this.selectedVehicle.vehicle.make} ${this.selectedVehicle.vehicle.model}`);

From 5e4b43d5c771b56f0df0c36b0b2ead33f1f3b75b Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Wed, 1 Jun 2022 08:27:08 -0400
Subject: [PATCH 27/32] CSR-347: restore address-vehicle tests to be included

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

diff --git a/jest.config.js b/jest.config.js
index 839db4378..e8d3abcc9 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -23,8 +23,6 @@ module.exports = {
     "!src/layouts/address-lookup/address-lookup.vue",
     "!src/layouts/address-lookup/customer-questions/customer-questions.vue",
     "!src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue",
-    "!src/layouts/address-vehicles/address-vehicles.vue",
-    "!src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue",
     "!src/common-components/dropdown-question/dropdown-question.vue",
     "!src/common-components/textbox-question/textbox-question.vue",
     "!src/ux-components/alert\alert.vue",

From c5c9e89007f73e96ab9815d2e47e780e8d7267d1 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Wed, 1 Jun 2022 08:43:11 -0400
Subject: [PATCH 28/32] CSR-347: add unit tests for address-vehicles
 page/components

---
 .../address-vehicles-question.spec.js         |  63 ++++
 .../address-vehicles/address-vehicles.spec.js | 349 ++++++++++++++++++
 2 files changed, 412 insertions(+)
 create mode 100644 src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.spec.js
 create mode 100644 src/layouts/address-vehicles/address-vehicles.spec.js

diff --git a/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.spec.js b/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.spec.js
new file mode 100644
index 000000000..eaa24c9d4
--- /dev/null
+++ b/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.spec.js
@@ -0,0 +1,63 @@
+import { shallowMount } from "@vue/test-utils";
+import addressVehiclesQuestion from "@/layouts/address-vehicles/address-vehicles-question/address-vehicles-question";
+
+
+describe("addressVehiclesQuestion.vue", () => {
+
+    it("Should return content for differentVehicleAlertHeader", () => {
+      // Arrange
+      const wrapper = shallowMount(addressVehiclesQuestion, {
+        mixins: [mockMixin],
+      });
+  
+      // Assert
+      expect(wrapper.vm.differentVehicleAlertHeader).toEqual('FoundWindshieldTestReturn');
+    });
+
+    it("Should return content for differentVehicleAlertBody", () => {
+      // Arrange
+      const wrapper = shallowMount(addressVehiclesQuestion, {
+        mixins: [mockMixin],
+        propsData: {
+            vehicles: ["1", "2"],
+            modelValue: ["1", "2"],
+        }
+      });
+      
+      // Assert
+      expect(wrapper.vm.differentVehicleAlertBody).toEqual('FoundWindshieldTestReturn');
+    });
+
+    it("Should emit a modelValue change when setting selectedVehicleVin", async () => {
+      // Arrange
+      const wrapper = shallowMount(addressVehiclesQuestion, {
+        mixins: [mockMixin],
+        propsData: {
+            vehicles: ["1", "2"],
+            modelValue: ["1", "2"],
+        }
+      });
+
+      // Act
+      const localThis = { $emit: jest.fn() }
+      addressVehiclesQuestion.computed.selectedVehicleVin.set.call(localThis, 'newValue');
+
+      // Assert
+      expect(localThis.$emit).toBeCalledWith("update:modelValue", "newValue");
+    });
+
+});
+
+const mockMixin = {
+    methods: {
+      getCmsContent: jest.fn((contentName) => {
+          if (contentName === "FoundWindshield") {
+            return 'FoundWindshieldTestReturn';
+          }
+          return null;
+        }),
+        vehicles: jest.fn(() => {
+            return [{ vehicle: "test" }];
+          })
+    }
+  }
diff --git a/src/layouts/address-vehicles/address-vehicles.spec.js b/src/layouts/address-vehicles/address-vehicles.spec.js
new file mode 100644
index 000000000..2fdd10276
--- /dev/null
+++ b/src/layouts/address-vehicles/address-vehicles.spec.js
@@ -0,0 +1,349 @@
+// Components
+import addressVehicles from "@/layouts/address-vehicles/address-vehicles";
+
+// Supporting Files
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import store from "@/store";
+import * as navigateToHeritage from "@/helpers/heritage-integration/navigation-helper";
+
+
+// Mock our module for promises.
+jest.mock("@/helpers/damage-helper", () => ({
+  isGlassAvailableForCarId: () => {
+    return false;
+  },
+}));
+
+
+describe("addressVehicles.vue", () => {
+
+    test("Should return true for valid page requisites if carId / zipCode / emailAddress / pageData exists", async () => {
+      // Arrange
+      const { wrapper } = setupMocks({});
+      wrapper.vm.$router.navigate = jest.fn();
+      
+      // Act
+      const result = wrapper.vm.arePagePrerequisitesValid();
+
+      //Assert
+      expect(result).toBe(true);
+
+      wrapper.unmount();
+    });
+
+    test("Should return false for valid page requisites if carId is missing", async () => {
+      // Arrange
+      const { wrapper } = setupMocks({});
+      wrapper.vm.$router.navigate = jest.fn();
+      
+      // Act
+      wrapper.vm.$store.getters.order.vehicle.carId = null;
+      const result = wrapper.vm.arePagePrerequisitesValid();
+
+      //Assert
+      expect(result).toBe(false);
+
+      wrapper.unmount();
+    });
+
+
+    // NOTE: this test is only here to meet code coverage; it does not test any logic in the original function
+    test("Should navigate to CLICKED_BACK if backButtonAction is run", async () => {
+      // Arrange
+      const { wrapper } = setupMocks({});
+      wrapper.vm.$router.navigate = jest.fn();
+      
+      // Act
+      wrapper.setData({
+        selectedVehicleVin: ['5NMS3CADXLH233004'],
+      });
+      wrapper.vm.backButtonAction();
+
+      //Assert
+      expect(wrapper.vm.$router.navigate).toBeCalled();
+
+      wrapper.unmount();
+    });
+
+    // NOTE: this test is only here to meet code coverage; it does not test any logic in the original function
+    test("Should run several related methods if forwardButtonAction is run", async () => {
+      // Arrange
+      const { wrapper } = setupMocks({});
+      const lookupVinResponse = {
+        data: {
+          carId: "456"
+        }
+      }
+      
+      // the following has to be set BEFORE changing the data which is being watched, and requires updateButtonText to be mocked
+      wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
+      wrapper.vm.$refs.funnelFooter.removeLoader = jest.fn();
+      wrapper.vm.lookupVin = jest.fn(() => Promise.resolve(lookupVinResponse));
+      wrapper.vm.$router.navigateAfterSave = jest.fn();
+      wrapper.vm.updateCustomerInfo = jest.fn().mockImplementation(()=> {});
+      wrapper.vm.navigateForward = jest.fn().mockImplementation(()=> {});
+
+      // Act
+      wrapper.setData({
+        selectedVehicleVin: ['5NMS3CADXLH233004'],
+      });
+      
+      await wrapper.vm.forwardButtonAction();
+      wrapper.vm.$nextTick();
+
+      //Assert
+      expect(wrapper.vm.updateCustomerInfo).toBeCalled();
+      expect(wrapper.vm.navigateForward).toBeCalled();
+
+      wrapper.unmount();
+    });
+
+    test("Should return out of forwardButtonAction if lookupVin returns with an error", async () => {
+      // Arrange
+      const { wrapper } = setupMocks({});
+
+      const lookupVinResponse = {
+        error: "there is an error"
+      }
+      
+      // the following has to be set BEFORE changing the data which is being watched, and requires updateButtonText to be mocked
+      wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
+      wrapper.vm.$refs.funnelFooter.removeLoader = jest.fn();
+      wrapper.vm.lookupVin = jest.fn(() => Promise.reject(lookupVinResponse));
+      wrapper.vm.$router.navigateAfterSave = jest.fn();
+      wrapper.vm.updateCustomerInfo = jest.fn().mockImplementation(()=> {});
+
+      // Act
+      wrapper.setData({
+        selectedVehicleVin: ['5NMS3CADXLH233004'],
+      });
+      await wrapper.vm.forwardButtonAction();
+      wrapper.vm.$nextTick();
+
+      //Assert
+      expect(wrapper.vm.forwardButtonAction).toReturn;
+
+      wrapper.unmount();
+    });
+
+    test("Should send dispatch reset if carId is different and selected glass not available for vehicle on updateCustomerInfo", async () => {
+      // Arrange
+      const { wrapper } = setupMocks({});
+      const lookupVinResponse = {
+        data: {
+          carId: "456"
+        }
+      }
+    
+      // the following has to be set BEFORE changing the data which is being watched, and requires updateButtonText to be mocked
+      wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
+      wrapper.vm.lookupVin = jest.fn(() => Promise.resolve(lookupVinResponse));
+      wrapper.vm.$router.navigateAfterSave = jest.fn();
+      
+      // Act
+      wrapper.setData({
+        selectedVehicleVin: ['5NMS3CADXLH233004'],
+        isSelectedGlassAvailableForVehicle: false,
+        isCarIdDifferent: true,
+      });
+      await wrapper.vm.updateCustomerInfo(wrapper.vm.selectedVehicle.vin, wrapper.vm.selectedVehicle.vehicle);
+
+      //Assert
+      expect(store.dispatch).toBeCalledWith("resetDamageAndDependencies");
+
+      wrapper.unmount();
+    });
+
+    // NOTE: this test is only here to meet code coverage; it does not test any logic in the original function
+    test("Should send dispatch store action if lookupVin is called", async () => {
+      // Arrange
+      const { wrapper } = setupMocks({});
+
+      // Act
+      await wrapper.vm.lookupVin('1234567890');
+
+      //Assert
+      expect(store.dispatch).toBeCalledWith("lookupVehicleByVin", {"vin": "1234567890"});
+
+      wrapper.unmount();
+    });
+
+    test("If selectedVehicleVin changes, then should update isCarIdDifferent", async () => {
+      // Arrange
+      const { wrapper } = setupMocks({});
+      wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
+
+      // Act
+      wrapper.setData({
+        selectedVehicleVin: ['5NMS3CADXLH233004'],
+        isCarIdDifferent: false,
+      });
+      await wrapper.vm.resetDependentState();
+
+      //Assert
+      expect(wrapper.vm.isCarIdDifferent).toBe(true);
+
+      wrapper.unmount();
+    });
+
+    test("If selectedVehicleVin changes, then text on funnel footer should be updated", async () => {
+      // Arrange
+      const { wrapper } = setupMocks({});
+      wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
+
+      // Act
+      wrapper.setData({
+        selectedVehicleVin: ['5NMS3CADXLH233004'],
+        isCarIdDifferent: false,
+      });
+      await wrapper.vm.resetDependentState();
+
+      //Assert
+      expect(wrapper.vm.$refs.funnelFooter.updateButtonText).toBeCalled();
+
+      wrapper.unmount();
+    });
+
+    test("Should navigate to CLICKED_FORWARD scenario if carId is different and selected glass not available for vehicle on navigateForward", async () => {
+      // Arrange
+      const { wrapper } = setupMocks({});
+      wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
+      wrapper.vm.$router.navigateAfterSave = jest.fn();
+      
+      // Act
+      wrapper.setData({
+        selectedVehicleVin: ['5NMS3CADXLH233004'],
+        isSelectedGlassAvailableForVehicle: false,
+        isCarIdDifferent: true,
+      });
+      await wrapper.vm.navigateForward();
+
+      //Assert
+      expect(wrapper.vm.$router.navigateAfterSave).toBeCalledTimes(1);
+
+      wrapper.unmount();
+    });
+
+    test("Should navigate to navigateAfterSaveToHeritageFunnel if carId is not different on navigateForward", async () => {
+      // Arrange
+      const { wrapper } = setupMocks({});
+      wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
+      wrapper.vm.$refs.loadingModal.showModal = jest.fn();
+      navigateToHeritage.navigateAfterSaveToHeritageFunnel = jest.fn();
+      
+      // Act
+      wrapper.setData({
+        selectedVehicleVin: ['5NMS3CADXLH233004'],
+        isSelectedGlassAvailableForVehicle: true,
+        isCarIdDifferent: false,
+      });
+      await wrapper.vm.navigateForward();
+
+      //Assert
+      expect(navigateToHeritage.navigateAfterSaveToHeritageFunnel).toBeCalledTimes(1);
+
+      wrapper.unmount();
+    });
+
+});
+
+
+function setupMocks({
+  // modelValueProp = "1900",
+  cmsQuestionText = "CMS text goes here",
+  // dataFromStoreApi = [],
+}) {
+  //Mock store
+  store.dispatch = jest.fn(() => {});
+  store.getters = { 
+    pageData: jest.fn((pageName) => {
+      // console.log('pageName: ', pageName) // address-vehicles
+      return [
+        {
+          vehicle: {
+            "carId": "CR00069309",
+            "category": "SUV",
+            "year": 2020,
+            "make": "Hyundai",
+            "model": "Santa Fe",
+            "style": "4 door utility",
+            "imageUrl": "https://dbhdyzvm8lm25.cloudfront.net/color_0320_032/MY2020/13769/13769_cc0320_032_WW8.jpg",
+            "imageVifNumber": "13769",
+            "imageVifColor": "white"
+          },
+          vin: "5NMS3CADXLH233004"
+        },
+      ];
+    }),
+    order: {
+      vehicle: {
+        carId: "123",
+      },
+      serviceLocation: {
+        zipCode: "12345"
+      },
+      customer: {
+        emailAddress: "qw@er.ty"
+      }
+    },
+    damage: {
+      glassToReplace: "Windshield"
+    },
+    vehicle: {
+      carId: "456",
+    }
+  };
+
+  // baseMixin.methods.dispatchStoreAction = jest.fn();
+
+
+  const mountOptions = getMountOptions({
+    store: {
+      dispatch: store.dispatch,
+      getters: store.getters,
+    },
+    router: {
+      navigate: jest.fn(),
+    },
+  });
+
+  //Mock props
+  const mockMixin = {
+    methods: {
+      getCmsContent: jest.fn((contentName) => {
+        if (contentName === "FoundMultipleVehicles") {
+          return 'FoundMultipleVehiclesTestReturn';
+        }
+        if (contentName === "ProvideVinAlert") {
+          return 'ProvideVinAlertTestReturn';
+        }
+        return null;
+      }),
+      // dispatchStoreAction: jest.fn(() => {
+      //   console.log("23424243")
+      // }),
+      // isGlassAvailableForCarId: () => {
+      //   console.log("%%%%%%%%%%%%%%%")
+      //   return Promise.resolve(true)
+      // }
+      
+      // lookupVin: jest.fn(() => Promise.resolve(lookupVinResponse)),
+
+    },
+  }
+  // mountOptions.propsData = {
+  //   modelValue: modelValueProp,
+  // };
+
+  mountOptions.mixins = [mockMixin];
+  
+  const wrapper = shallowMount(addressVehicles, mountOptions);
+
+  //Mock CMS content
+  const cmsContent = {
+    QuestionText: cmsQuestionText,
+  };
+
+  return { wrapper };
+}

From 882b79ad7d28f32d2c95d0dfa5e9a5468e730290 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Wed, 1 Jun 2022 08:52:46 -0400
Subject: [PATCH 29/32] CSR-347: remove accidentally included test code

---
 src/layouts/address-lookup/address-lookup.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/address-lookup/address-lookup.vue b/src/layouts/address-lookup/address-lookup.vue
index e9578fb3b..8e58d09b0 100644
--- a/src/layouts/address-lookup/address-lookup.vue
+++ b/src/layouts/address-lookup/address-lookup.vue
@@ -329,7 +329,7 @@ export default {
 				{ 
 					licenseLastName: lastName, 
 					licenseStreetAddress: streetAddress, 
-					licenseZip: (typeof zip !== "string") ? zip.toString() : zip,
+					licenseZip: zip,
 					licenseState: state,
 				}, false
 			);

From ddce966bb60c61f0d97ab8ae30abce39b34767fa Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 1 Jun 2022 10:03:04 -0400
Subject: [PATCH 30/32] Update animated text to flow in reverse direction.

---
 .../loading-modal/loading-modal.vue           | 50 +++++++++----------
 src/router/index.js                           |  6 +++
 2 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/src/common-components/loading-modal/loading-modal.vue b/src/common-components/loading-modal/loading-modal.vue
index a3cbfa280..4b55abe3a 100644
--- a/src/common-components/loading-modal/loading-modal.vue
+++ b/src/common-components/loading-modal/loading-modal.vue
@@ -1,9 +1,9 @@
 <template>
-  <div v-if="isModalVisible" class="container-fluid modal-loader">
+  <div class="container-fluid modal-loader">
     <div class="row g-2 h-100 d-flex align-items-center">
       <div class="container-fluid overflow-hidden">
         <div class="row h-100">
-          <div class="col text-center tagbg mb-2">
+          <div class="col text-center tagbg mb-4">
             <div class="spinner-border text-danger" role="status">
               <span class="visually-hidden">Loading...</span>
             </div>
@@ -12,17 +12,7 @@
         <div class="row">
           <div class="col">
             <div class="text-container slide">
-              <p>Finishing up
-                <span class="dot-1">.</span>
-                <span class="dot-2">.</span>
-                <span class="dot-3">.</span>
-              </p>
-              <p>Nearly there
-                <span class="dot-1">.</span>
-                <span class="dot-2">.</span>
-                <span class="dot-3">.</span>
-              </p>
-              <p>Generating your quote
+              <p>Assessing your damage
                 <span class="dot-1">.</span>
                 <span class="dot-2">.</span>
                 <span class="dot-3">.</span>
@@ -32,7 +22,17 @@
                 <span class="dot-2">.</span>
                 <span class="dot-3">.</span>
               </p>
-              <p>Assessing your damage
+              <p>Generating your quote
+                <span class="dot-1">.</span>
+                <span class="dot-2">.</span>
+                <span class="dot-3">.</span>
+              </p>
+              <p>Nearly there
+                <span class="dot-1">.</span>
+                <span class="dot-2">.</span>
+                <span class="dot-3">.</span>
+              </p>
+              <p>Finishing up
                 <span class="dot-1">.</span>
                 <span class="dot-2">.</span>
                 <span class="dot-3">.</span>
@@ -130,39 +130,39 @@ export default {
 
     p {
       margin: 0 175px;
-      transform: translateX(-2346px);
+      transform: translateX(180px);
     }
 
     @keyframes slide-in {
       0% {
-        transform: translateX(-2346px)
+        transform: translateX(180px)
       }
       11% {
-        transform: translateX(-2010px)
+        transform: translateX(-80px)
       }
       22% {
-        transform: translateX(-2010px)
+        transform: translateX(-80px)
       }
       33% {
-        transform: translateX(-1490px)
+        transform: translateX(-600px)
       }
       44% {
-        transform: translateX(-1490px)
+        transform: translateX(-600px)
       }
       55% {
-        transform: translateX(-985px)
+        transform: translateX(-1110px)
       }
       66% {
-        transform: translateX(-985px)
+        transform: translateX(-1110px)
       }
       77% {
-        transform: translateX(-490px)
+        transform: translateX(-1600px)
       }
       88% {
-        transform: translateX(-490px)
+        transform: translateX(-1600px)
       }
       100% {
-        transform: translateX(-40px)
+        transform: translateX(-2050px)
       }
     }
 
diff --git a/src/router/index.js b/src/router/index.js
index db46a3306..c8d614d48 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -21,6 +21,7 @@ import analyticsMixin from "@/mixins/analytics-mixin";
 // Components
 import ComponentTest from "@/layouts/component-test/component-test.vue";
 import FormTest from "@/layouts/form-test/form-test.vue";
+import Modal from "@/common-components/loading-modal/loading-modal.vue";
 
 
 const routes = [
@@ -34,6 +35,11 @@ const routes = [
     name: "FormTest",
     component: FormTest,
   },
+  {
+    path: "/loading-modal", // This is a temporary route for testing.
+    name: "Modal",
+    component: Modal,
+  },
   {
     path: "/",
     name: "root",

From c45a7048cb36ba358dca4be3b9169612e19acde9 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 1 Jun 2022 10:05:53 -0400
Subject: [PATCH 31/32] Remove temp test code. Re-add v-if.

---
 src/common-components/loading-modal/loading-modal.vue | 2 +-
 src/router/index.js                                   | 6 ------
 2 files changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/common-components/loading-modal/loading-modal.vue b/src/common-components/loading-modal/loading-modal.vue
index 4b55abe3a..d06392755 100644
--- a/src/common-components/loading-modal/loading-modal.vue
+++ b/src/common-components/loading-modal/loading-modal.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container-fluid modal-loader">
+  <div v-if="isModalVisible" class="container-fluid modal-loader">
     <div class="row g-2 h-100 d-flex align-items-center">
       <div class="container-fluid overflow-hidden">
         <div class="row h-100">
diff --git a/src/router/index.js b/src/router/index.js
index c8d614d48..db46a3306 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -21,7 +21,6 @@ import analyticsMixin from "@/mixins/analytics-mixin";
 // Components
 import ComponentTest from "@/layouts/component-test/component-test.vue";
 import FormTest from "@/layouts/form-test/form-test.vue";
-import Modal from "@/common-components/loading-modal/loading-modal.vue";
 
 
 const routes = [
@@ -35,11 +34,6 @@ const routes = [
     name: "FormTest",
     component: FormTest,
   },
-  {
-    path: "/loading-modal", // This is a temporary route for testing.
-    name: "Modal",
-    component: Modal,
-  },
   {
     path: "/",
     name: "root",

From d0cb20cfef59fe7a2f5c787bdfc9db914cf7fd24 Mon Sep 17 00:00:00 2001
From: FrankRua <frank.rua@safelite.com>
Date: Wed, 1 Jun 2022 13:07:30 -0400
Subject: [PATCH 32/32] Added conditions

---
 azure-pipelines.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/azure-pipelines.yml b/azure-pipelines.yml
index 3819fca35..f126d3aee 100644
--- a/azure-pipelines.yml
+++ b/azure-pipelines.yml
@@ -173,6 +173,7 @@ stages:
                       __VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__: $(__VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__)
                     cfDistributionId: $(cfDistributionId)
     - stage: AutoTagReleaseBuild
+      condition: eq(variables['Build.SourceBranch'], variables['prod-branch'] )
       displayName: Auto Tag Release Build For Production
       jobs:
         - template: templates/digital/auto-tag.yml@AzureDevOps