From bbec912fc3e8dc476b54e13503689dac744d160f Mon Sep 17 00:00:00 2001
From: Donielle Austin <Donielle.Austin@safelite.com>
Date: Thu, 19 May 2022 14:18:14 -0400
Subject: [PATCH 01/35] extra vin success defect

---
 src/layouts/vin-lookup/vin-lookup.vue | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index 541653898..e16779ad0 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -65,14 +65,6 @@
           alertClass="alert-warning"
           cmsWidgetName="NoMatchAlertWidget"
         />
-        <alert
-          class="my-4"
-          :manualHeadline="PerfectMatchNewVinAlertReadOnlyHeader"
-          :manualCopy="PerfectMatchNewVinAlertReadOnlyBody"
-          v-model="customAlertData"
-          v-if="isVinFieldReadOnly"
-          alertClass="alert-success"
-        />
         <alert
           class="my-4"
           :manualHeadline="MatchedDifferentVehicleAlertHeader"

From d4b606e475d6f10679af4d89402143c5405cc9d0 Mon Sep 17 00:00:00 2001
From: Donielle Austin <Donielle.Austin@safelite.com>
Date: Thu, 19 May 2022 16:20:20 -0400
Subject: [PATCH 02/35] vin lookup extra succss alert

---
 src/layouts/vin-lookup/vin-lookup.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index e16779ad0..471797c99 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -65,6 +65,14 @@
           alertClass="alert-warning"
           cmsWidgetName="NoMatchAlertWidget"
         />
+        <alert
+          class="my-4"
+          :manualHeadline="PerfectMatchNewVinAlertReadOnlyHeader"
+          :manualCopy="PerfectMatchNewVinAlertReadOnlyBody"
+          v-model="customAlertData"
+          v-if="isVinFieldReadOnly" 
+          alertClass="alert-success"
+        />
         <alert
           class="my-4"
           :manualHeadline="MatchedDifferentVehicleAlertHeader"
@@ -93,7 +101,7 @@
           :manualHeadline="PerfectMatchNewVinAlertHeader"
           :manualCopy="PerfectMatchNewVinAlertBody"
           v-model="customAlertData"
-          v-if="perfectMatchNewVinAlert && !noServiceZip && !vinNotFound && meta.valid"
+          v-if="perfectMatchNewVinAlert && !noServiceZip && !vinNotFound && meta.valid && !isVinFieldReadOnly"
           alertClass="alert-success"
         />
         <funnelFooter

From 75c11e24e36753ccc0c3f9cedab2a44c0a2a7558 Mon Sep 17 00:00:00 2001
From: Scott Kiener <scott.kiener@safelite.com>
Date: Thu, 19 May 2022 16:35:31 -0400
Subject: [PATCH 03/35] CSR-635 | Vin not found alert not clearing

Cleared vin not found alert when vin input is changed
---
 src/layouts/vin-lookup/vin-lookup.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index 6476ac1a9..674c9a6d8 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -189,6 +189,7 @@ export default {
   },
   watch: {
     vin() {
+      this.vinNotFound = false;
       this.$refs.funnelFooter.updateButtonText(
         this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
       );

From 55b99f0933e7b2ec00fb5f82c41b0e891bc35bdb Mon Sep 17 00:00:00 2001
From: CarlNation <carl.nation@safelite.com>
Date: Fri, 20 May 2022 06:14:56 -0400
Subject: [PATCH 04/35] CSR-611 glassToReplace does not exist in store for
 repairs

---
 src/helpers/damage-helper.js | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/helpers/damage-helper.js b/src/helpers/damage-helper.js
index 0928a2656..55d10738d 100644
--- a/src/helpers/damage-helper.js
+++ b/src/helpers/damage-helper.js
@@ -3,17 +3,18 @@ import baseMixin from "@/mixins/base-mixin.js";
 import { storeActions } from "@/constants/store-actions";
 
 export function getDamageString() {
-    const damageLocations = store.getters.damage.glassToReplace;
+    // If it's a repair it's always a windshield.
     const isRepair = store.getters.damage.isRepair;
+    if(isRepair){
+      return "windshield"
+    }
+
+    const damageLocations = store.getters.damage.glassToReplace;
 
     let returnString;
     if (!damageLocations) {
       return;
     }
-    // If it's a repair it's always a windshield.
-    if(isRepair){
-      return "windshield"
-    }
 
     if (damageLocations.length > 1) {
       returnString = "match"

From 4816bf75c01d602b344aa86399d4be744e800885 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Fri, 20 May 2022 08:12:16 -0400
Subject: [PATCH 05/35] CSR-624: add unmounted method to clear checked answers

---
 .../list-button-horizontal/list-button-horizontal.vue         | 4 ++++
 src/ux-components/list-button/list-button.vue                 | 4 ++++
 src/ux-components/list-card/list-card.vue                     | 4 ++++
 3 files changed, 12 insertions(+)

diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index ccb995f77..974a965b8 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -91,6 +91,10 @@ export default {
         : this.selectedValues[0];
     }
   },
+  unmounted() { // needed to clear this button's selectedValues if it is removed
+    this.checkValue = false;
+    this.handleCheckChange();
+  },
   methods: {
     displayLoader() {
       this.isLoaderDisplayed = true;
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 1f1a5046b..e567ebaa6 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -91,6 +91,10 @@ export default {
         : this.selectedValues[0];
     }
   },
+  unmounted() { // needed to clear this button's selectedValues if it is removed
+    this.checkValue = false;
+    this.handleCheckChange();
+  },
   methods: {
     displayLoader() {
       this.isLoaderDisplayed = true;
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 742ec4584..c5ed398f3 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -98,6 +98,10 @@ export default {
         : this.selectedValues[0];
     }
   },
+  unmounted() { // needed to clear this button's selectedValues if it is removed
+    this.checkValue = false;
+    this.handleCheckChange();
+  },
   computed: {
     getLabelClasses() {
       if (this.isWide) {

From 476bd06bac8a055ef7e5daad381a4ca6702e3460 Mon Sep 17 00:00:00 2001
From: Mark Harris <mark.harris@safelite.com>
Date: Fri, 20 May 2022 08:17:06 -0400
Subject: [PATCH 06/35] Sped up transition speed

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

diff --git a/src/App.vue b/src/App.vue
index f161d937e..285c445ac 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <router-view v-slot="{ Component }">
-    <transition :duration="{ enter: 800, leave: 300 }" name="route-fade" mode="out-in">
+    <transition :duration="{ enter: 150, leave: 150 }" name="route-fade" mode="out-in">
       <component :is="Component" />
     </transition>
   </router-view>

From e71f7109ddcc06676447023772ca742d051dd414 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Fri, 20 May 2022 08:18:31 -0400
Subject: [PATCH 07/35] Now not even creating autocomplete widget when the full
 address is prepopulated, as it is when coming back to the page

---
 .../address-questions/address-questions.vue   | 72 +++++++++----------
 1 file changed, 36 insertions(+), 36 deletions(-)

diff --git a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
index 98c0ca927..f188cf214 100644
--- a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
+++ b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
@@ -192,6 +192,7 @@ export default ({
 				this.addressModel.zipCode !== null) {
 
 				this.showAddressFields = true;
+				return;
 			}
 
 			const addressField1 = document.getElementById("autocomplete");
@@ -230,34 +231,34 @@ export default ({
 						
 					})
 
-						addressField1.onchange = function() {
-							const hover = document.querySelector(".pac-container .pac-item:hover");
-							// if an item has been clicked, do nothing, otherwise get first solution and use Geocoder to get the place
-							if (hover === null) {
-								const item = document.querySelector(".pac-container .pac-item");
-								if (item != null) {
-									const firstResult = item.textContent;
-									const geocoder = new window.google.maps.Geocoder();
-									geocoder.geocode({
-										address: firstResult
-									}, function (results, status) {
-										if (status === window.google.maps.GeocoderStatus.OK) {
-											fillInAddress(results[0]);
-											self.displayVerificationWarning = true;
-											self.displayNoMatchWarning = false;
-										}
-									});
-								}
-								else {
-									self.addressModel.city = "";
-									self.addressModel.state = "";
-									self.addressModel.zipCode = "";      
-									self.showAddressFields = true;
-									self.displayVerificationWarning = false;
-									self.displayNoMatchWarning = true;
-								}					
+					addressField1.onchange = function() {
+						const hover = document.querySelector(".pac-container .pac-item:hover");
+						// if an item has been clicked, do nothing, otherwise get first solution and use Geocoder to get the place
+						if (hover === null) {
+							const item = document.querySelector(".pac-container .pac-item");
+							if (item != null) {
+								const firstResult = item.textContent;
+								const geocoder = new window.google.maps.Geocoder();
+								geocoder.geocode({
+									address: firstResult
+								}, function (results, status) {
+									if (status === window.google.maps.GeocoderStatus.OK) {
+										fillInAddress(results[0]);
+										self.displayVerificationWarning = true;
+										self.displayNoMatchWarning = false;
+									}
+								});
 							}
-						};
+							else {
+								self.addressModel.city = "";
+								self.addressModel.state = "";
+								self.addressModel.zipCode = "";      
+								self.showAddressFields = true;
+								self.displayVerificationWarning = false;
+								self.displayNoMatchWarning = true;
+							}					
+						}
+					};
 
 					function fillInAddress(place) {
 						if (!place) {
@@ -265,6 +266,7 @@ export default ({
 						}
 
 						if (place && place.address_components) {
+							self.addressModel.streetAddress= "";
 							self.showAddressFields = true;
 
 							for (const component of place.address_components) {
@@ -276,8 +278,7 @@ export default ({
 										break;
 									}
 									case "route": {
-										self.addressModel.streetAddress +=
-										" " + component.short_name;
+										self.addressModel.streetAddress += " " + component.short_name;
 										break;
 									}
 									case "locality": {
@@ -286,7 +287,6 @@ export default ({
 									}
 									case "administrative_area_level_1": {
 										self.addressModel.state = component.short_name;
-										// self.addressModel.state = "";
 										break;
 									}
 									case "postal_code": {
@@ -311,12 +311,12 @@ export default ({
 						const pacContainer = document.querySelector(".pac-container");
 						pacContainer.remove();
 
-						}
-					})
-					.catch(() => {
-						// Failed to fetch script
-						console.log("Unable to load Google Places API script");
-					});	
+					}
+				})
+				.catch(() => {
+					// Failed to fetch script
+					console.log("Unable to load Google Places API script");
+				});	
 		}
 	},
 	mounted() {

From 4f6c07f37b474a9c621e47b983a8285eb7468cfa Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 20 May 2022 08:20:34 -0400
Subject: [PATCH 08/35] CSR-639 fix spacing.

---
 src/layouts/vehicle-damage/vehicle-damage.vue |  6 +++---
 .../windshield-options/windshield-options.vue | 20 +++++++++----------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index ddeae5bec..88c8973fd 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -32,7 +32,7 @@
             :selectedDamageLocations="selectedDamageLocations"
           />
           <alert
-            class="my-3"
+            class="my-5"
             cmsWidgetName="HasReplacementConflict"
             v-show="hasRepairReplaceConflict"
             alertClass="alert-danger"
@@ -296,12 +296,12 @@ export default {
       this.navigateForward();
     },
 
-    navigateForward(){  
+    navigateForward(){
 
       // If vin already exists, navigate directly to vin-lookup
       if(store.getters.vehicle.vin) {
         this.$router.navigateAfterSave(this.navigationScenarios.CLICKED_FORWARD_WITH_VIN, this.$route);
-        return; 
+        return;
       }
       else {
         this.$router.navigateAfterSave(this.navigationScenarios.CLICKED_FORWARD_WITHOUT_VIN, this.$route);
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
index 6e7c844ff..bdbe25195 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
@@ -14,7 +14,7 @@
             alertClass="alert-danger"
             :isDismissible="false"
           />
-        <windshieldChipCountQuestion cmsWidgetName="WindshieldChipCountQuestion" 
+        <windshieldChipCountQuestion cmsWidgetName="WindshieldChipCountQuestion"
             :isAvailable="isRepairOptionSelected && !hasRepairReplaceConflict"
             groupName="WindshieldChipCountQuestion"
             v-model="selectedWindshieldChipCountValues"
@@ -30,7 +30,7 @@
             isRequired
         />
         <alert
-            class="my-3"
+            class="mt-5"
             cmsWidgetName="SplitSingleConflict"
             v-if="hasSplitSingleConflict"
             alertClass="alert-danger"
@@ -56,10 +56,10 @@ defineRule("windshield-chip-count-required", required(errorMessages.WINDSHIELD_C
 defineRule("windshield-replace-options-required", required(errorMessages.WINSHIELD_REPLACE_OPTIONS_REQUIRED));
 
 defineRule("check-for-repair-and-replace", (value, [otherFieldValue]) => {
-    if (value.toString().toUpperCase().includes(damageLocationsSelected.REPAIR.toUpperCase()) && 
-        otherFieldValue.toString().toUpperCase().includes(damageLocationsSelected.WINDSHIELD.toUpperCase()) && 
-        Array.isArray(otherFieldValue) && 
-        otherFieldValue.length > 1) 
+    if (value.toString().toUpperCase().includes(damageLocationsSelected.REPAIR.toUpperCase()) &&
+        otherFieldValue.toString().toUpperCase().includes(damageLocationsSelected.WINDSHIELD.toUpperCase()) &&
+        Array.isArray(otherFieldValue) &&
+        otherFieldValue.length > 1)
     {
         return false;
     }
@@ -72,8 +72,8 @@ defineRule("repair-only", (value) => {
     return false;
 });
 defineRule("prevent-split-and-single-together", (value) => {
-    if (value.toString().toUpperCase().includes(damageLocationsSelected.SINGLE.toUpperCase()) && 
-        (value.toString().toUpperCase().includes(damageLocationsSelected.DRIVER.toUpperCase()) || 
+    if (value.toString().toUpperCase().includes(damageLocationsSelected.SINGLE.toUpperCase()) &&
+        (value.toString().toUpperCase().includes(damageLocationsSelected.DRIVER.toUpperCase()) ||
         value.toString().toUpperCase().includes(damageLocationsSelected.PASSENGER.toUpperCase())))
     {
         return false;
@@ -145,7 +145,7 @@ export default ({
             }
         },
         isWindshieldDamageLocation() {
-            return this.selectedDamageLocations.some(selectedDamages => 
+            return this.selectedDamageLocations.some(selectedDamages =>
                 {
                     return Boolean(selectedDamages.toUpperCase() === "WINDSHIELD");
                 });
@@ -193,4 +193,4 @@ export default ({
         alert,
     },
 })
-</script>
\ No newline at end of file
+</script>

From 5ee8d71252ffc74fe82ba850414d953a313778cf Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 20 May 2022 09:19:04 -0400
Subject: [PATCH 09/35] WIP modal test.

---
 .../loading-modal/loading-modal.vue           | 158 ++++++++++--------
 src/router/index.js                           |  10 +-
 2 files changed, 99 insertions(+), 69 deletions(-)

diff --git a/src/common-components/loading-modal/loading-modal.vue b/src/common-components/loading-modal/loading-modal.vue
index c24e1f86f..c86367e3a 100644
--- a/src/common-components/loading-modal/loading-modal.vue
+++ b/src/common-components/loading-modal/loading-modal.vue
@@ -1,91 +1,115 @@
 <template>
-  <div v-if="isModalVisible" class="loading-modal-backdrop">
-    <div class="loading-modal">
-      <section class="loading-modal-body">
-        <div class="modal-icon-container text-center">
-          <object type="image/svg+xml" :data="fmgAnimatedTransition"/>
+  <div class="container modal-loader vh-100">
+    <div class="row h-100 d-flex align-items-center">
+      <div class="container-fluid">
+        <div class="row h-100">
+          <div class="col text-center tagbg">
+            <div class="spinner-border text-danger" role="status">
+              <span class="visually-hidden">Loading...</span>
+            </div>
+          </div>
         </div>
-      </section>
+        <div class="row">
+          <div class="col">
+            <p class="m-0 fs-5 d-flex position-absolute justify-content-center" id="text-1">
+              Assessing your damage...
+            </p>
+            <p class="m-0 fs-5 d-flex position-absolute justify-content-center" id="text-2">
+              Finding your glass...
+            </p>
+            <p class="m-0 fs-5 d-flex position-absolute justify-content-center" id="text-3">
+              Generating your quote...
+            </p>
+            <p class="m-0 fs-5 d-flex position-absolute justify-content-center" id="text-4">
+              Seriously... don't go...
+            </p>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-// load the path like this - <object> data attribute doesn't load the relative path correctly
-const FMGAnimatedTransition = require("@/assets/img/FMGTransitionAnimation.svg");
-  export default {
-    name: 'Modal',
-    data() {
-      return {
-        isModalVisible: false,
-        fmgAnimatedTransition: FMGAnimatedTransition,
-      };
-    },
-    methods: {
-      showModal() {
-        //Display modal
-        this.isModalVisible = true;
-        //Force page reload on back button
-        window.addEventListener("pageshow", function(evt) {
-          if(evt.persisted){
+export default {
+  name: 'Modal',
+  methods: {
+    showModal() {
+      //Display modal
+      this.isModalVisible = true;
+      //Force page reload on back button
+      window.addEventListener("pageshow", function(evt) {
+        if(evt.persisted){
           setTimeout(function(){
-              window.location.reload();
-        }, 10);
-    }
-}, false);
-      },
+            window.location.reload();
+          }, 10);
+        }
+      }, false);
     },
-  };
+  },
+};
 </script>
 
 <style lang="scss">
-  .loading-modal-backdrop {
-    position: fixed;
-    top: 0;
-    bottom: 0;
+.modal-loader {
+  p {
+    font-family: Roboto;
     left: 0;
     right: 0;
-    background-color: #e5e5e5;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 1050;
-    width: 100vw;
-    height: 100vh;
   }
 
-  .loading-modal {
-    position: absolute;
-    background: #ffffff;
-    padding: 0 0 32px 0;
-    box-shadow: 2px 2px 20px 1px;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
-    border-radius: 4px;
-    top: 48px;
-    height: 186px;
-    width: 327px;
+  .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");
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 96px;
   }
 
-  .loading-modal-text {
-      padding: 0 24px 0 24px;
+  .spinner-border {
+    width: 6rem;
+    height: 6rem;
+    border: 0.35em solid currentColor;
+    border-right-color: transparent;
   }
 
-  .modal-icon-container {
-    margin: 15px auto;
-    padding-bottom: 26px;
+  #text-1 {
+    animation: 3s ease-in-out 5s normal forwards 1 fade1;
+  }
+  #text-2 {
+    opacity: 0;
+    animation: 6s ease-in-out 7s normal forwards 1 fade2;
+  }
+  #text-3 {
+    opacity: 0;
+    animation: 6s ease-in-out 12s normal forwards 1 fade3;
+  }
+  #text-4 {
+    opacity: 0;
+    animation: 3s ease-in-out 17s normal forwards 1 fade4;
   }
 
-  .modal-icon-container img {
-      position: absolute;
-      vertical-align: middle;
-      border: 0;
-      width: 327px;
-      height: 186px;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
+  @keyframes fade1 {
+    0% { opacity:1; }
+    100% { opacity:0; }
   }
+
+  @keyframes fade2 {
+    0% { opacity:0; }
+    33% { opacity:1; }
+    66% { opacity:1; }
+    100% { opacity:0; }
+  }
+
+  @keyframes fade3 {
+    0% { opacity:0; }
+    33% { opacity:1; }
+    66% { opacity:1; }
+    100% { opacity:0; }
+  }
+
+  @keyframes fade4 {
+    0% { opacity:0; }
+    100% { opacity:1; }
+  }
+}
 </style>
diff --git a/src/router/index.js b/src/router/index.js
index 397802063..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",
@@ -126,7 +132,7 @@ const router = createRouter({
 router.afterEach(async (to, from) => {
   // Push page view to GA
   analyticsMixin.methods.pushPageViewToGA(to.query[queryStrings.FMG_PAGE]);
-  
+
   baseMixin.methods.dispatchStoreAction(storeActions.GET_EXPERIMENTS_BY_USER, { userId: getDeviceIdValue() })
   .then( (response) => {
     analyticsMixin.methods.pushExperimentsToDataLayer(response.data);
@@ -271,4 +277,4 @@ function resetDependentState(component) {
   return component.default.methods.resetDependentState();
 }
 
-export default router;
\ No newline at end of file
+export default router;

From 9829a05a0c3348da9663e540ce8c843a84ec172e Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 20 May 2022 09:23:41 -0400
Subject: [PATCH 10/35] 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 c86367e3a..cfb0c8264 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 modal-loader vh-100">
+  <div  v-if="isModalVisible" class="container modal-loader vh-100">
     <div class="row h-100 d-flex align-items-center">
       <div class="container-fluid">
         <div class="row h-100">

From be65d13fbe70a7c9db02d911d3bdd6d8fec27776 Mon Sep 17 00:00:00 2001
From: Mark Harris <mark.harris@safelite.com>
Date: Fri, 20 May 2022 09:32:31 -0400
Subject: [PATCH 11/35] synced up css with app.vue

---
 src/App.vue                       | 3 ++-
 src/styles/common-animations.scss | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 285c445ac..71b56feaf 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,7 @@
 <template>
   <router-view v-slot="{ Component }">
-    <transition :duration="{ enter: 150, leave: 150 }" name="route-fade" mode="out-in">
+    <transition :duration="{ enter: 200, leave: 200 }" name="route-fade" mode="out-in">
+      <!-- The above durations should be kept in sync with the global css class "fade-on-route-transition" -->
       <component :is="Component" />
     </transition>
   </router-view>
diff --git a/src/styles/common-animations.scss b/src/styles/common-animations.scss
index e247f3ded..c03c267ab 100644
--- a/src/styles/common-animations.scss
+++ b/src/styles/common-animations.scss
@@ -12,11 +12,11 @@
 }
 
 .route-fade-enter-active .fade-on-route-transition {
-    transition: opacity 0.8s ease;
+    transition: opacity 0.2s ease-out; //This duration should be kept in sync with the app.vue <transition> element attribute
 }
 
 .route-fade-leave-active .fade-on-route-transition {
-    transition: opacity 0.3s ease; 
+    transition: opacity 0.2s ease-in;  //This duration should be kept in sync with the app.vue <transition> element attribute
 }
 
 .route-fade-enter-from .fade-on-route-transition,

From 269ee1390b76a634c166390045e0b0f0faaf2be7 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 20 May 2022 09:48:21 -0400
Subject: [PATCH 12/35] Add data item back into code.

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

diff --git a/src/common-components/loading-modal/loading-modal.vue b/src/common-components/loading-modal/loading-modal.vue
index cfb0c8264..7d6d4d578 100644
--- a/src/common-components/loading-modal/loading-modal.vue
+++ b/src/common-components/loading-modal/loading-modal.vue
@@ -33,6 +33,11 @@
 <script>
 export default {
   name: 'Modal',
+  data() {
+    return {
+      isModalVisible: false,
+    };
+  },
   methods: {
     showModal() {
       //Display modal

From 03b771af5deec33f3cd9b6d135a4da94f9bfd046 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 20 May 2022 10:49:58 -0400
Subject: [PATCH 13/35] WIP modal update.

Remove animated text. Set background color and z-index.
---
 .../loading-modal/loading-modal.vue           | 59 ++-----------------
 1 file changed, 5 insertions(+), 54 deletions(-)

diff --git a/src/common-components/loading-modal/loading-modal.vue b/src/common-components/loading-modal/loading-modal.vue
index 7d6d4d578..a9be32267 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 modal-loader vh-100">
+  <div class="container modal-loader vh-100">
     <div class="row h-100 d-flex align-items-center">
       <div class="container-fluid">
         <div class="row h-100">
@@ -11,18 +11,8 @@
         </div>
         <div class="row">
           <div class="col">
-            <p class="m-0 fs-5 d-flex position-absolute justify-content-center" id="text-1">
-              Assessing your damage...
-            </p>
-            <p class="m-0 fs-5 d-flex position-absolute justify-content-center" id="text-2">
-              Finding your glass...
-            </p>
-            <p class="m-0 fs-5 d-flex position-absolute justify-content-center" id="text-3">
-              Generating your quote...
-            </p>
-            <p class="m-0 fs-5 d-flex position-absolute justify-content-center" id="text-4">
-              Seriously... don't go...
-            </p>
+            <p class="mb-0 fs-5 text-center">We're processing your information.</p>
+            <p class="mb-0 fs-5 text-center">This could take up to 30 seconds...</p>
           </div>
         </div>
       </div>
@@ -57,10 +47,10 @@ export default {
 
 <style lang="scss">
 .modal-loader {
+  background-color: $white;
+  z-index: 9999;
   p {
     font-family: Roboto;
-    left: 0;
-    right: 0;
   }
 
   .tagbg {
@@ -77,44 +67,5 @@ export default {
     border-right-color: transparent;
   }
 
-  #text-1 {
-    animation: 3s ease-in-out 5s normal forwards 1 fade1;
-  }
-  #text-2 {
-    opacity: 0;
-    animation: 6s ease-in-out 7s normal forwards 1 fade2;
-  }
-  #text-3 {
-    opacity: 0;
-    animation: 6s ease-in-out 12s normal forwards 1 fade3;
-  }
-  #text-4 {
-    opacity: 0;
-    animation: 3s ease-in-out 17s normal forwards 1 fade4;
-  }
-
-  @keyframes fade1 {
-    0% { opacity:1; }
-    100% { opacity:0; }
-  }
-
-  @keyframes fade2 {
-    0% { opacity:0; }
-    33% { opacity:1; }
-    66% { opacity:1; }
-    100% { opacity:0; }
-  }
-
-  @keyframes fade3 {
-    0% { opacity:0; }
-    33% { opacity:1; }
-    66% { opacity:1; }
-    100% { opacity:0; }
-  }
-
-  @keyframes fade4 {
-    0% { opacity:0; }
-    100% { opacity:1; }
-  }
 }
 </style>

From a360481e7074b460e432222a8f6955593200d9e2 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 20 May 2022 10:53:32 -0400
Subject: [PATCH 14/35] Update background color.

---
 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 a9be32267..08505f4ba 100644
--- a/src/common-components/loading-modal/loading-modal.vue
+++ b/src/common-components/loading-modal/loading-modal.vue
@@ -47,7 +47,7 @@ export default {
 
 <style lang="scss">
 .modal-loader {
-  background-color: $white;
+  background-color: $gray-100;
   z-index: 9999;
   p {
     font-family: Roboto;

From 4f41a1ca56094deff1f3020b3246735291f21ab1 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 20 May 2022 11:00:29 -0400
Subject: [PATCH 15/35] Remove font size.

---
 src/common-components/loading-modal/loading-modal.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/common-components/loading-modal/loading-modal.vue b/src/common-components/loading-modal/loading-modal.vue
index 08505f4ba..f62a9a558 100644
--- a/src/common-components/loading-modal/loading-modal.vue
+++ b/src/common-components/loading-modal/loading-modal.vue
@@ -11,8 +11,8 @@
         </div>
         <div class="row">
           <div class="col">
-            <p class="mb-0 fs-5 text-center">We're processing your information.</p>
-            <p class="mb-0 fs-5 text-center">This could take up to 30 seconds...</p>
+            <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>
         </div>
       </div>

From cc2d127530ff7b2225b0578738774465844f1844 Mon Sep 17 00:00:00 2001
From: CarlNation <carl.nation@safelite.com>
Date: Fri, 20 May 2022 13:20:49 -0400
Subject: [PATCH 16/35] CSR-216 do not send to logapp if missing sid

---
 src/mixins/analytics-mixin.js | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/mixins/analytics-mixin.js b/src/mixins/analytics-mixin.js
index 133187797..05a23a1e2 100644
--- a/src/mixins/analytics-mixin.js
+++ b/src/mixins/analytics-mixin.js
@@ -9,12 +9,18 @@ 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') {
+        return;
+      }
+
       const currentPageName = getPageNameByQueryString();
       var payload = {
         userId: getDeviceIdValue(),
         sessionKey: getSessionKeyValue(),
         pageName: currentPageName,
-        sessionId: getSessionIdValue(),
+        sessionId: sid,
         action: '', 
         event: pageEvent,
         shouldUseSessionId: true,
@@ -24,6 +30,12 @@ export default {
     },
 
     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') {
+        return;
+      }
+
       const currentPageName = getPageNameByQueryString();
       var payload = {
         userId: getDeviceIdValue(),

From 6b53eb74d91b120956fe795048714dc38a5aef05 Mon Sep 17 00:00:00 2001
From: CarlNation <carl.nation@safelite.com>
Date: Fri, 20 May 2022 13:39:41 -0400
Subject: [PATCH 17/35] CSR-216 fix test

---
 src/mixins/analytics-mixin.spec.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/mixins/analytics-mixin.spec.js b/src/mixins/analytics-mixin.spec.js
index 8dd49045d..db773da56 100644
--- a/src/mixins/analytics-mixin.spec.js
+++ b/src/mixins/analytics-mixin.spec.js
@@ -1,5 +1,5 @@
 import analyticsMixin from "@/mixins/analytics-mixin";
-import { setupMocksForJsFiles } from "@/helpers/unit-test-helper.js";
+import { setupMocksForJsFiles, setupCookies } from "@/helpers/unit-test-helper.js";
 import { storeActions } from "@/constants/store-actions";
 
 describe("analyticsMixin.js", () => {
@@ -14,6 +14,12 @@ describe("analyticsMixin.js", () => {
     }
     const mocks = setupMocksForJsFiles(mockData);
 
+    const testCookieValue = {
+      sid: '10000000-0000-0000-0000-000000000001'
+    }
+
+    setupCookies({ funnelCookieValue: JSON.stringify(testCookieValue) });
+
     analyticsMixin.methods.logPageView(type, payload);
 
     expect(mocks.baseMixin.methods.dispatchStoreAction).toBeCalled();

From 9071ddcffd914c434c36ae50bbd7fd46efbc5ac3 Mon Sep 17 00:00:00 2001
From: CarlNation <carl.nation@safelite.com>
Date: Fri, 20 May 2022 14:03:03 -0400
Subject: [PATCH 18/35] CSR-216 use var

---
 src/mixins/analytics-mixin.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/mixins/analytics-mixin.js b/src/mixins/analytics-mixin.js
index 05a23a1e2..2e71a0aae 100644
--- a/src/mixins/analytics-mixin.js
+++ b/src/mixins/analytics-mixin.js
@@ -41,7 +41,7 @@ export default {
         userId: getDeviceIdValue(),
         sessionKey: getSessionKeyValue(),
         pageName: currentPageName,
-        sessionId: getSessionIdValue(),
+        sessionId: sid,
         category: category, 
         action: action,
         label: label,

From 0c1bf515e3dd6ee749d1de914d538ae0b71b6dd6 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 20 May 2022 14:22:18 -0400
Subject: [PATCH 19/35] WIP modal updates.

---
 src/common-components/loading-modal/loading-modal.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/common-components/loading-modal/loading-modal.vue b/src/common-components/loading-modal/loading-modal.vue
index f62a9a558..db002ab5e 100644
--- a/src/common-components/loading-modal/loading-modal.vue
+++ b/src/common-components/loading-modal/loading-modal.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="container modal-loader vh-100">
-    <div class="row h-100 d-flex align-items-center">
+  <div class="container modal-loader vh-100 overflow-visible">
+    <div class="row g-2 h-100 d-flex align-items-center">
       <div class="container-fluid">
         <div class="row h-100">
           <div class="col text-center tagbg">
@@ -49,6 +49,10 @@ export default {
 .modal-loader {
   background-color: $gray-100;
   z-index: 9999;
+  position: absolute;
+  width: 100%;
+  left: 0;
+  top: 0;
   p {
     font-family: Roboto;
   }

From 261e593a3b0d3f99c67e6856fe8eabe413b71c4f Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 20 May 2022 14:34:53 -0400
Subject: [PATCH 20/35] Re-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 db002ab5e..3eabf3590 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 modal-loader vh-100 overflow-visible">
+  <div v-if="isModalVisible" class="container modal-loader vh-100 overflow-visible">
     <div class="row g-2 h-100 d-flex align-items-center">
       <div class="container-fluid">
         <div class="row h-100">

From f98ce4eddb78097e9612aec13a2664886014ad18 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 20 May 2022 16:09:47 -0400
Subject: [PATCH 21/35] Modal css updates to make full height on Android

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

diff --git a/src/common-components/loading-modal/loading-modal.vue b/src/common-components/loading-modal/loading-modal.vue
index 3eabf3590..b11910ec6 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 modal-loader vh-100 overflow-visible">
+  <div v-if="isModalVisible" class="container-fluid modal-loader vh-100 overflow-visible">
     <div class="row g-2 h-100 d-flex align-items-center">
       <div class="container-fluid">
         <div class="row h-100">
@@ -47,12 +47,16 @@ export default {
 
 <style lang="scss">
 .modal-loader {
+  height: 100%;
+  max-width: 100% !important;//For use with modal only
   background-color: $gray-100;
   z-index: 9999;
   position: absolute;
   width: 100%;
   left: 0;
+  right: 0;
   top: 0;
+  bottom: 0;
   p {
     font-family: Roboto;
   }

From adb74675ff323042daca6b78868429b8019c576e Mon Sep 17 00:00:00 2001
From: CarlNation <carl.nation@safelite.com>
Date: Fri, 20 May 2022 16:24:52 -0400
Subject: [PATCH 22/35] CSR-216 move the ga event log out of handlecheckchange

This was causing every item in the list to log an event not just the selected item.
---
 src/common-components/button-question/button-question.vue     | 3 ---
 src/mixins/analytics-mixin.js                                 | 4 ++--
 .../list-button-horizontal/list-button-horizontal.vue         | 2 ++
 src/ux-components/list-button/list-button.vue                 | 2 ++
 src/ux-components/list-card/list-card.vue                     | 2 ++
 5 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index c2eb72971..07efe470e 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -52,7 +52,6 @@ import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-bu
 import listCard from "@/ux-components/list-card/list-card";
 import { ErrorMessage } from 'vee-validate';
 import radio from "@/ux-components/radio/radio";
-import { queryStrings } from "@/constants/query-strings";
 
 export default {
   name: "buttonQuestion",
@@ -135,8 +134,6 @@ export default {
     },
     handleCheckedChanged(val) {
 
-      this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, val.value, true);
-
       if(this.isMultiSelect && this.selectedValues) {
         // Add or remove item to array of data to emit
         const newSelectedValues = this.selectedValues;
diff --git a/src/mixins/analytics-mixin.js b/src/mixins/analytics-mixin.js
index 2e71a0aae..ca5a24a3e 100644
--- a/src/mixins/analytics-mixin.js
+++ b/src/mixins/analytics-mixin.js
@@ -11,7 +11,7 @@ export default {
     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') {
+      if (sid === '00000000-0000-0000-0000-000000000000' || sid == null) {
         return;
       }
 
@@ -32,7 +32,7 @@ export default {
     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') {
+      if (sid === '00000000-0000-0000-0000-000000000000' || sid == null) {
         return;
       }
 
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index 974a965b8..eef4be443 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -54,6 +54,7 @@
 <script>
 import { useField } from "vee-validate";
 import loader from "@/ux-components/loader/loader";
+import { queryStrings } from "@/constants/query-strings";
 
 export default {
   name: "listButtonHorizontal",
@@ -120,6 +121,7 @@ export default {
           this.handleCheckChange();
       }
       this.handleChange(this.value);
+      this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true);
     },
     handleCheckChange() {
       const emitEvent = {
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index e567ebaa6..f09384934 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -54,6 +54,7 @@
 <script>
 import { useField } from "vee-validate";
 import loader from "@/ux-components/loader/loader";
+import { queryStrings } from "@/constants/query-strings";
 
 export default {
   name: "listButton",
@@ -120,6 +121,7 @@ export default {
         this.handleCheckChange();
       }
       this.handleChange(this.value);
+      this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true);
     },
     handleCheckChange() {
       const emitEvent = {
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index c5ed398f3..264d7c299 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -61,6 +61,7 @@
 
 <script>
 import { useField } from "vee-validate";
+import { queryStrings } from "@/constants/query-strings";
 
 export default {
   name: "listCard",
@@ -137,6 +138,7 @@ export default {
         this.handleCheckChange();
       }
       this.handleChange(this.value);
+      this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true);
     },
     handleCheckChange() {
       const emitEvent = {

From 7125ec0fed44b0e8b92184618bebfd665afb4b2c Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 20 May 2022 16:36:56 -0400
Subject: [PATCH 23/35] Add overflow hidden.

---
 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 b11910ec6..753bd6f75 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 vh-100 overflow-visible">
+  <div v-if="isModalVisible" class="container-fluid modal-loader vh-100 overflow-hidden">
     <div class="row g-2 h-100 d-flex align-items-center">
       <div class="container-fluid">
         <div class="row h-100">

From 9d461ecca3ab74923e20f3704005f19eb35a4820 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 20 May 2022 17:05:21 -0400
Subject: [PATCH 24/35] Change how modal is positioned.

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

diff --git a/src/common-components/loading-modal/loading-modal.vue b/src/common-components/loading-modal/loading-modal.vue
index 753bd6f75..1fc1f5578 100644
--- a/src/common-components/loading-modal/loading-modal.vue
+++ b/src/common-components/loading-modal/loading-modal.vue
@@ -46,17 +46,22 @@ export default {
 </script>
 
 <style lang="scss">
+body {
+  overflow: hidden;
+}
 .modal-loader {
-  height: 100%;
-  max-width: 100% !important;//For use with modal only
-  background-color: $gray-100;
-  z-index: 9999;
-  position: absolute;
-  width: 100%;
+  position: fixed;
+  top: 0;
   left: 0;
   right: 0;
-  top: 0;
   bottom: 0;
+  z-index: 1055;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  outline: 0;
+  background: $gray-100;
   p {
     font-family: Roboto;
   }

From e13d2fc097cc9197caa1e696e283421e0a15c345 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Fri, 20 May 2022 17:25:17 -0400
Subject: [PATCH 25/35] CSR-216: fix unit tests

---
 .../list-button-horizontal.spec.js            | 22 +++++++++++++++++++
 .../list-button/list-button.spec.js           | 22 +++++++++++++++++++
 src/ux-components/list-card/list-card.spec.js | 16 ++++++++++++++
 3 files changed, 60 insertions(+)

diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
index cbd757a88..5c288f660 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
@@ -1,6 +1,7 @@
 import { shallowMount } from "@vue/test-utils";
 import listButtonHorizontal from "./list-button-horizontal";
 import { nextTick } from "vue";
+import { GaActions } from "@/constants/analytics";
 
 describe("list-button-horizontal.vue", () => {
   it("Should return input type checkbox if isMultiSelect is true", async () => {
@@ -90,6 +91,13 @@ describe("list-button-horizontal.vue", () => {
   it("Should return loader enabled true", async () => {
     // Act
     const wrapper = shallowMount(listButtonHorizontal, {
+      global: {
+        mocks: {
+          '$route': { query: { fmgPage: 'page-name' } },
+          GaActions: GaActions,
+          pushEventToGA: jest.fn(),
+        }
+      },
       propsData: {
         selectingInitiatesLoad: true,
       },
@@ -112,6 +120,13 @@ describe("list-button-horizontal.vue", () => {
   it("Should return loader color", async () => {
     // Act
     const wrapper = shallowMount(listButtonHorizontal, {
+      global: {
+        mocks: {
+          '$route': { query: { fmgPage: 'page-name' } },
+          GaActions: GaActions,
+          pushEventToGA: jest.fn(),
+        }
+      },
       propsData: {
         loaderColor: "blue",
         selectingInitiatesLoad: true,
@@ -135,6 +150,13 @@ describe("list-button-horizontal.vue", () => {
   it("Should return loader position", async () => {
     // Act
     const wrapper = shallowMount(listButtonHorizontal, {
+      global: {
+        mocks: {
+          '$route': { query: { fmgPage: 'page-name' } },
+          GaActions: GaActions,
+          pushEventToGA: jest.fn(),
+        }
+      },
       propsData: {
         loaderPosition: "right",
         selectingInitiatesLoad: true,
diff --git a/src/ux-components/list-button/list-button.spec.js b/src/ux-components/list-button/list-button.spec.js
index 7a244a5bf..7cce84cd8 100644
--- a/src/ux-components/list-button/list-button.spec.js
+++ b/src/ux-components/list-button/list-button.spec.js
@@ -1,6 +1,7 @@
 import { shallowMount } from "@vue/test-utils";
 import listButton from "./list-button";
 import { nextTick } from "vue";
+import { GaActions } from "@/constants/analytics";
 
 describe("list-button.vue", () => {
   it("Should return input type checkbox if isMultiSelect is true", async () => {
@@ -90,6 +91,13 @@ describe("list-button.vue", () => {
   it("Should return loader enabled true", async () => {
     // Act
     const wrapper = shallowMount(listButton, {
+      global: {
+        mocks: {
+          '$route': { query: { fmgPage: 'page-name' } },
+          GaActions: GaActions,
+          pushEventToGA: jest.fn(),
+        }
+      },
       propsData: {
         selectingInitiatesLoad: true,
       },
@@ -109,6 +117,13 @@ describe("list-button.vue", () => {
   it("Should return loader color", async () => {
     // Act
     const wrapper = shallowMount(listButton, {
+      global: {
+        mocks: {
+          '$route': { query: { fmgPage: 'page-name' } },
+          GaActions: GaActions,
+          pushEventToGA: jest.fn(),
+        }
+      },
       propsData: {
         loaderColor: "blue",
         selectingInitiatesLoad: true,
@@ -128,6 +143,13 @@ describe("list-button.vue", () => {
   it("Should return loader position", async () => {
     // Act
     const wrapper = shallowMount(listButton, {
+      global: {
+        mocks: {
+          '$route': { query: { fmgPage: 'page-name' } },
+          GaActions: GaActions,
+          pushEventToGA: jest.fn(),
+        }
+      },
       propsData: {
         loaderPosition: "right",
         selectingInitiatesLoad: true,
diff --git a/src/ux-components/list-card/list-card.spec.js b/src/ux-components/list-card/list-card.spec.js
index d810909e8..2fbdaade4 100644
--- a/src/ux-components/list-card/list-card.spec.js
+++ b/src/ux-components/list-card/list-card.spec.js
@@ -1,6 +1,7 @@
 import { shallowMount } from "@vue/test-utils";
 import listCard from "./list-card";
 import { nextTick } from "vue";
+import { GaActions } from "@/constants/analytics";
 
 describe("list-card.vue", () => {
   it("Should return input type checkbox if isMultiSelect is true", async () => {
@@ -292,8 +293,16 @@ describe("list-card.vue", () => {
   });
 
   it("Should run handleChange if triggerButton is triggered", async () => {
+
     // Act
     const wrapper = shallowMount(listCard, {
+      global: {
+        mocks: {
+          '$route': { query: { fmgPage: 'page-name' } },
+          GaActions: GaActions,
+          pushEventToGA: jest.fn(),
+        }
+      },
       propsData: {
         selectingInitiatesLoad: false,
       },
@@ -312,6 +321,13 @@ describe("list-card.vue", () => {
   it("Should run handleCheckChange and displayLoader if triggerButton is triggered and seletingInitiatesLoad is true", async () => {
     // Act
     const wrapper = shallowMount(listCard, {
+      global: {
+        mocks: {
+          '$route': { query: { fmgPage: 'page-name' } },
+          GaActions: GaActions,
+          pushEventToGA: jest.fn(),
+        }
+      },
       propsData: {
         selectingInitiatesLoad: true,
       },

From 102f41430c2ccf08f8b4978ba1c7f034afd6a3fc Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Mon, 23 May 2022 08:58:33 -0400
Subject: [PATCH 26/35] WIP Modal updates.

---
 src/App.vue                                   |   1 +
 .../loading-modal/loading-modal.vue           |  69 +++-----
 src/styles/animated-modal.scss                | 162 ++++++++++++++++++
 3 files changed, 190 insertions(+), 42 deletions(-)
 create mode 100644 src/styles/animated-modal.scss

diff --git a/src/App.vue b/src/App.vue
index 71b56feaf..c69b3769e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,6 +9,7 @@
 
 <style lang="scss">
   @import "./node_modules/bootstrap/scss/bootstrap";
+  @import "@/styles/animated-modal.scss";
   @import "@/styles/common-styles.scss";
   @import "@/styles/common-typography-styles.scss";
   @import "@/styles/common-error-styles.scss";
diff --git a/src/common-components/loading-modal/loading-modal.vue b/src/common-components/loading-modal/loading-modal.vue
index 1fc1f5578..359c895e8 100644
--- a/src/common-components/loading-modal/loading-modal.vue
+++ b/src/common-components/loading-modal/loading-modal.vue
@@ -1,7 +1,7 @@
 <template>
-  <div v-if="isModalVisible" class="container-fluid modal-loader vh-100 overflow-hidden">
+  <div class="container-fluid modal-loader">
     <div class="row g-2 h-100 d-flex align-items-center">
-      <div class="container-fluid">
+      <div class="container-fluid overflow-hidden">
         <div class="row h-100">
           <div class="col text-center tagbg">
             <div class="spinner-border text-danger" role="status">
@@ -11,8 +11,31 @@
         </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>
+            <p class="sliding-text one">Assessing your damage
+              <span class="dot-1">.</span>
+              <span class="dot-2">.</span>
+              <span class="dot-3">.</span>
+            </p>
+            <p class="sliding-text two">Finding your glass
+              <span class="dot-1">.</span>
+              <span class="dot-2">.</span>
+              <span class="dot-3">.</span>
+            </p>
+            <p class="sliding-text three">Generating your quote
+              <span class="dot-1">.</span>
+              <span class="dot-2">.</span>
+              <span class="dot-3">.</span>
+            </p>
+            <p class="sliding-text four">Nearly there
+              <span class="dot-1">.</span>
+              <span class="dot-2">.</span>
+              <span class="dot-3">.</span>
+            </p>
+            <p class="sliding-text five">Finishing up
+              <span class="dot-1">.</span>
+              <span class="dot-2">.</span>
+              <span class="dot-3">.</span>
+            </p>
           </div>
         </div>
       </div>
@@ -44,41 +67,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss">
-body {
-  overflow: hidden;
-}
-.modal-loader {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1055;
-  width: 100%;
-  height: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
-  outline: 0;
-  background: $gray-100;
-  p {
-    font-family: Roboto;
-  }
-
-  .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");
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-size: 96px;
-  }
-
-  .spinner-border {
-    width: 6rem;
-    height: 6rem;
-    border: 0.35em solid currentColor;
-    border-right-color: transparent;
-  }
-
-}
-</style>
diff --git a/src/styles/animated-modal.scss b/src/styles/animated-modal.scss
new file mode 100644
index 000000000..ccdafa955
--- /dev/null
+++ b/src/styles/animated-modal.scss
@@ -0,0 +1,162 @@
+.modal-loader {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1055;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  outline: 0;
+  background: $gray-100;
+  p {
+    font-family: Roboto;
+    font-size: 1.25rem;
+  }
+
+  .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");
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 96px;
+  }
+
+  .spinner-border {
+    width: 6rem;
+    height: 6rem;
+    border: 0.45em solid currentColor;
+    border-right-color: transparent;
+  }
+
+  .sliding-text {
+    width: 100%;
+    margin: 0;
+    display: flex;
+    justify-content: center;
+    position: absolute;
+    transform:translateX(-100%);
+
+    &.one {
+      animation: slide-in 6s ease-in-out 1s forwards 1;
+    }
+    &.two {
+      animation: slide-in 6s ease-in-out 6.25s forwards 1;
+    }
+    &.three {
+      animation: slide-in 6s ease-in-out 11.5s forwards 1;
+    }
+    &.four {
+      animation: slide-in 6s ease-in-out 16.75s forwards 1;
+    }
+    &.five {
+      animation: slide-in-2 6s ease-in-out 22s forwards 1;
+    }
+
+    @keyframes slide-in {
+      0% {
+        transform: translateX(-1500px)
+      }
+      10% {
+        transform: translateX(0%)
+      }
+      12% {
+        transform: translateX(-7px)
+      }
+      14% {
+        transform: translateX(0)
+      }
+      95% {
+        transform: translateX(0%)
+      }
+      100% {
+        transform: translateX(1500px)
+      }
+    }
+
+    @keyframes slide-in-2 {
+      0% {
+        transform: translateX(-1500px)
+      }
+      10% {
+        transform: translateX(0%)
+      }
+      12% {
+        transform: translateX(-7px)
+      }
+      14% {
+        transform: translateX(0)
+      }
+      100% {
+        transform: translateX(0%)
+      }
+    }
+
+    .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;
+        }
+      }
+    }
+  }
+}

From 6595a70c5c66be35ab50761b459a2e453d67093d Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Mon, 23 May 2022 09:07:06 -0400
Subject: [PATCH 27/35] Re-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 359c895e8..e4b6c1b56 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 3104199b2f7b49f3d15cb6d8fdeab209a6d854dc Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Mon, 23 May 2022 09:49:59 -0400
Subject: [PATCH 28/35] WIP add animation delay. Test.

---
 src/styles/animated-modal.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/styles/animated-modal.scss b/src/styles/animated-modal.scss
index ccdafa955..6d0b09321 100644
--- a/src/styles/animated-modal.scss
+++ b/src/styles/animated-modal.scss
@@ -37,6 +37,7 @@
     justify-content: center;
     position: absolute;
     transform:translateX(-100%);
+    animation-delay: 2s;
 
     &.one {
       animation: slide-in 6s ease-in-out 1s forwards 1;

From 62f4af22567777909df7b266b2f45aec3b73c1da Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Mon, 23 May 2022 10:21:46 -0400
Subject: [PATCH 29/35] Change shorthand animation to individual properties.

---
 src/styles/animated-modal.scss | 26 ++++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/styles/animated-modal.scss b/src/styles/animated-modal.scss
index 6d0b09321..950d62134 100644
--- a/src/styles/animated-modal.scss
+++ b/src/styles/animated-modal.scss
@@ -37,22 +37,36 @@
     justify-content: center;
     position: absolute;
     transform:translateX(-100%);
-    animation-delay: 2s;
 
     &.one {
-      animation: slide-in 6s ease-in-out 1s forwards 1;
+      animation: slide-in 6s ease-in-out;
+      animation-fill-mode: forwards;
+      animation-iteration-count: 1;
+      animation-delay: 1s;
     }
     &.two {
-      animation: slide-in 6s ease-in-out 6.25s forwards 1;
+      animation: slide-in 6s ease-in-out;
+      animation-fill-mode: forwards;
+      animation-iteration-count: 1;
+      animation-delay: 6.25s;
     }
     &.three {
-      animation: slide-in 6s ease-in-out 11.5s forwards 1;
+      animation: slide-in 6s ease-in-out;
+      animation-fill-mode: forwards;
+      animation-iteration-count: 1;
+      animation-delay: 11.5s;
     }
     &.four {
-      animation: slide-in 6s ease-in-out 16.75s forwards 1;
+      animation: slide-in 6s ease-in-out;
+      animation-fill-mode: forwards;
+      animation-iteration-count: 1;
+      animation-delay: 16.75s;
     }
     &.five {
-      animation: slide-in-2 6s ease-in-out 22s forwards 1;
+      animation: slide-in-2 6s ease-in-out;
+      animation-fill-mode: forwards;
+      animation-iteration-count: 1;
+      animation-delay: 22s;
     }
 
     @keyframes slide-in {

From a66603c5be7eb661f375d0678809d34bb4f5c408 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Mon, 23 May 2022 14:46:45 -0400
Subject: [PATCH 30/35] Revert css animated spinner and tweak for appearance.

---
 src/App.vue                                   |   1 -
 .../loading-modal/loading-modal.vue           |  69 ++++---
 src/styles/animated-modal.scss                | 177 ------------------
 3 files changed, 42 insertions(+), 205 deletions(-)
 delete mode 100644 src/styles/animated-modal.scss

diff --git a/src/App.vue b/src/App.vue
index c69b3769e..71b56feaf 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,7 +9,6 @@
 
 <style lang="scss">
   @import "./node_modules/bootstrap/scss/bootstrap";
-  @import "@/styles/animated-modal.scss";
   @import "@/styles/common-styles.scss";
   @import "@/styles/common-typography-styles.scss";
   @import "@/styles/common-error-styles.scss";
diff --git a/src/common-components/loading-modal/loading-modal.vue b/src/common-components/loading-modal/loading-modal.vue
index e4b6c1b56..8e3bae4a5 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">
+          <div class="col text-center tagbg mb-2">
             <div class="spinner-border text-danger" role="status">
               <span class="visually-hidden">Loading...</span>
             </div>
@@ -11,31 +11,8 @@
         </div>
         <div class="row">
           <div class="col">
-            <p class="sliding-text one">Assessing your damage
-              <span class="dot-1">.</span>
-              <span class="dot-2">.</span>
-              <span class="dot-3">.</span>
-            </p>
-            <p class="sliding-text two">Finding your glass
-              <span class="dot-1">.</span>
-              <span class="dot-2">.</span>
-              <span class="dot-3">.</span>
-            </p>
-            <p class="sliding-text three">Generating your quote
-              <span class="dot-1">.</span>
-              <span class="dot-2">.</span>
-              <span class="dot-3">.</span>
-            </p>
-            <p class="sliding-text four">Nearly there
-              <span class="dot-1">.</span>
-              <span class="dot-2">.</span>
-              <span class="dot-3">.</span>
-            </p>
-            <p class="sliding-text five">Finishing up
-              <span class="dot-1">.</span>
-              <span class="dot-2">.</span>
-              <span class="dot-3">.</span>
-            </p>
+            <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>
         </div>
       </div>
@@ -67,3 +44,41 @@ export default {
   },
 };
 </script>
+
+<style lang="scss">
+.modal-loader {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1055;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  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");
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 96px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .spinner-border {
+    width: 6.5rem;
+    height: 6.5rem;
+    border: 0.45em solid currentColor;
+    border-right-color: transparent;
+  }
+}
+</style>
diff --git a/src/styles/animated-modal.scss b/src/styles/animated-modal.scss
deleted file mode 100644
index 950d62134..000000000
--- a/src/styles/animated-modal.scss
+++ /dev/null
@@ -1,177 +0,0 @@
-.modal-loader {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1055;
-  width: 100%;
-  height: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
-  outline: 0;
-  background: $gray-100;
-  p {
-    font-family: Roboto;
-    font-size: 1.25rem;
-  }
-
-  .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");
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-size: 96px;
-  }
-
-  .spinner-border {
-    width: 6rem;
-    height: 6rem;
-    border: 0.45em solid currentColor;
-    border-right-color: transparent;
-  }
-
-  .sliding-text {
-    width: 100%;
-    margin: 0;
-    display: flex;
-    justify-content: center;
-    position: absolute;
-    transform:translateX(-100%);
-
-    &.one {
-      animation: slide-in 6s ease-in-out;
-      animation-fill-mode: forwards;
-      animation-iteration-count: 1;
-      animation-delay: 1s;
-    }
-    &.two {
-      animation: slide-in 6s ease-in-out;
-      animation-fill-mode: forwards;
-      animation-iteration-count: 1;
-      animation-delay: 6.25s;
-    }
-    &.three {
-      animation: slide-in 6s ease-in-out;
-      animation-fill-mode: forwards;
-      animation-iteration-count: 1;
-      animation-delay: 11.5s;
-    }
-    &.four {
-      animation: slide-in 6s ease-in-out;
-      animation-fill-mode: forwards;
-      animation-iteration-count: 1;
-      animation-delay: 16.75s;
-    }
-    &.five {
-      animation: slide-in-2 6s ease-in-out;
-      animation-fill-mode: forwards;
-      animation-iteration-count: 1;
-      animation-delay: 22s;
-    }
-
-    @keyframes slide-in {
-      0% {
-        transform: translateX(-1500px)
-      }
-      10% {
-        transform: translateX(0%)
-      }
-      12% {
-        transform: translateX(-7px)
-      }
-      14% {
-        transform: translateX(0)
-      }
-      95% {
-        transform: translateX(0%)
-      }
-      100% {
-        transform: translateX(1500px)
-      }
-    }
-
-    @keyframes slide-in-2 {
-      0% {
-        transform: translateX(-1500px)
-      }
-      10% {
-        transform: translateX(0%)
-      }
-      12% {
-        transform: translateX(-7px)
-      }
-      14% {
-        transform: translateX(0)
-      }
-      100% {
-        transform: translateX(0%)
-      }
-    }
-
-    .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;
-        }
-      }
-    }
-  }
-}

From f3d9d5377f921dd8ac7810b675592c3f61868f62 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Mon, 23 May 2022 15:04:24 -0400
Subject: [PATCH 31/35] Re-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 8e3bae4a5..e3935a8a8 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 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 32/35] 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 33/35] 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 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 34/35] 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 35/35] 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 {