From 4c6e098f2d938793306f5bfe5780470ebc03e89f Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Thu, 4 Jan 2024 13:26:49 -0500
Subject: [PATCH 1/6] rename value

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

diff --git a/src/store/index.js b/src/store/index.js
index d43d98c4..ad361dd5 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -532,7 +532,7 @@ export const useMainStore = defineStore({
                                 model: this.order.vehicle.model,
                                 vin: this.order.vehicle.vin
                             },
-                            damageDescription: this.order.policy.damageCause
+                            cause: this.order.policy.damageCause
                         }
                     }
                 }).then((response) => {

From d3f2e3892d6e33a8fcf80c86f2efce856513a8d9 Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Fri, 5 Jan 2024 16:20:22 -0500
Subject: [PATCH 2/6] send cause and damageDescription in payload

---
 src/store/index.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/store/index.js b/src/store/index.js
index ad361dd5..803fb30f 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -532,7 +532,8 @@ export const useMainStore = defineStore({
                                 model: this.order.vehicle.model,
                                 vin: this.order.vehicle.vin
                             },
-                            cause: this.order.policy.damageCause
+                            cause: this.order.policy.damageCause,
+                            damageDescription: this.order.policy.damageCause
                         }
                     }
                 }).then((response) => {

From b7fb74d16ff30eb041bdc3235bf2428a706aa9ae Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Fri, 10 Nov 2023 09:44:07 -0500
Subject: [PATCH 3/6] loading modal updates

---
 src/App.vue                                   | 32 ++++++++++++++++-
 src/helpers/loading-modal-helper.js           | 20 +++++++++++
 .../loading-modal/loading-modal.vue           | 34 +++++++++++++++----
 src/router/index.js                           | 12 +++++++
 src/styles/ux-variables-svg-strings.scss      |  1 +
 5 files changed, 92 insertions(+), 7 deletions(-)
 create mode 100644 src/helpers/loading-modal-helper.js

diff --git a/src/App.vue b/src/App.vue
index fd4a5b43..a87cca15 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,12 +1,42 @@
 <template>
   <router-view v-slot="{ Component }">
-    <transition :duration="{ enter: 200, leave: 200 }" 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>
+  <loadingModal
+    :showLoader="shouldShowLoader"
+    :showTextCarousel="shouldShowTextCarousel" />
 </template>
 
+<script>
+import loadingModal from '@/iss-components/loading-modal/loading-modal.vue';
+import showIssLoadingModal from '@/helpers/loading-modal-helper.js';
+
+export default {
+    name: 'app',
+    components: {
+        loadingModal
+    },
+    setup() {
+        const { globalNonpersistedState } = showIssLoadingModal();
+        return { globalNonpersistedState };
+    },
+    computed: {
+        shouldShowLoader() {
+            return this.globalNonpersistedState.showLoadingModal;
+        },
+        shouldShowTextCarousel() {
+            return this.globalNonpersistedState.showTextCarousel;
+        }
+    }
+};
+</script>
+
 <style lang="scss">
    @import "./node_modules/bootstrap/scss/bootstrap";
    @import "@/styles/common-styles.scss";
diff --git a/src/helpers/loading-modal-helper.js b/src/helpers/loading-modal-helper.js
new file mode 100644
index 00000000..b7161980
--- /dev/null
+++ b/src/helpers/loading-modal-helper.js
@@ -0,0 +1,20 @@
+import { reactive } from 'vue';
+
+// state encapsulated and managed by the composable
+const globalNonpersistedState = reactive({
+    showLoadingModal: true,
+    showTextCarousel: false
+});
+
+const showIssLoadingModal = (newValue, showTextCarousel = false) => {
+    if (newValue !== undefined) {
+        globalNonpersistedState.showLoadingModal = newValue;
+    }
+    if (showTextCarousel !== undefined) {
+        globalNonpersistedState.showTextCarousel = showTextCarousel;
+    }
+
+    return { globalNonpersistedState };
+};
+
+export default showIssLoadingModal;
diff --git a/src/iss-components/loading-modal/loading-modal.vue b/src/iss-components/loading-modal/loading-modal.vue
index 02deed69..453fbf49 100644
--- a/src/iss-components/loading-modal/loading-modal.vue
+++ b/src/iss-components/loading-modal/loading-modal.vue
@@ -1,6 +1,6 @@
 <template>
     <div
-        v-if="isModalVisible"
+        v-if="showModalContent"
         class="container-fluid modal-loader">
         <div class="row g-2 h-100 d-flex align-items-center">
             <div class="container-fluid overflow-hidden">
@@ -13,7 +13,9 @@
                         </div>
                     </div>
                 </div>
-                <div class="row">
+                <div
+                    v-if="showTextCarouselContent"
+                    class="row">
                     <div class="col">
                         <div class="text-container slide">
                             <p
@@ -36,16 +38,34 @@
 export default {
     name: 'loading-modal',
     props: {
-        textSlides: Array
+        textSlides: Array,
+        showLoader: {
+            type: Boolean,
+            default: false
+        },
+        showTextCarousel: {
+            type: Boolean,
+            default: false
+        }
     },
     data() {
         return {
-            isModalVisible: false
+            isModalVisible: false,
+            isModalTextCarouselVisible: false
         };
     },
+    computed: {
+        showModalContent() {
+            return this.isModalVisible || this.showLoader;
+        },
+        showTextCarouselContent() {
+            return this.isModalTextCarouselVisible || this.showTextCarousel;
+        }
+    },
     methods: {
-        showModal() {
+        showModal(showTextCarousel = true) {
             // Display modal
+            this.isModalTextCarouselVisible = showTextCarousel;
             this.isModalVisible = true;
             // Force page reload on back button
             window.addEventListener(
@@ -68,6 +88,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "@/styles/ux-variables-svg-strings.scss";
+
 .modal-loader {
     position: fixed;
     top: 0;
@@ -83,7 +105,7 @@ export default {
     background: $gray-100;
 
     .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-image: url($svg-loading-modal-image);
         background-repeat: no-repeat;
         background-position: center center;
         background-size: 96px;
diff --git a/src/router/index.js b/src/router/index.js
index 78fe7005..e5a07d27 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -11,6 +11,7 @@ import { isSavedSessionStillActive } from '@/helpers/session-helper';
 import { getDeviceIdValue, getISSCookie, updateOrCreateISSCookie, updateSessionIdCookie } from '@/helpers/cookie-helper';
 import { experimentTriggers } from '@/constants/experiments';
 import applicationConfig from '@/constants/application-config';
+import showIssLoadingModal from '@/helpers/loading-modal-helper';
 
 import analyticsMixin from '@/mixins/analytics-mixin';
 import { saveSession } from '@/helpers/order-helper.js';
@@ -118,6 +119,15 @@ const router = createRouter({
     }
 });
 
+router.beforeEach(async (to, from, next) => {
+    const fromQueryPage = from.query?.issPage;
+    if (fromQueryPage === undefined) {
+        showIssLoadingModal(true);
+    }
+
+    next();
+});
+
 router.afterEach(async (to, from) => {
     /*eslint-disable-line*/
     const store = useMainStore();
@@ -128,6 +138,8 @@ router.afterEach(async (to, from) => {
         store.clearSaveSessionPromise();
     }
 
+    showIssLoadingModal(false);
+
     const saveSessionSynchronous = !!from.params[routerParams.SAVE_SESSION_SYNCHRONOUS];
     await saveSession({ shouldAwaitSaveSessionQueue: saveSessionSynchronous }).catch((error) => {
         if (from.name === issPageValues.WELCOME_PAGE) {
diff --git a/src/styles/ux-variables-svg-strings.scss b/src/styles/ux-variables-svg-strings.scss
index e99e2845..fbef8a3d 100644
--- a/src/styles/ux-variables-svg-strings.scss
+++ b/src/styles/ux-variables-svg-strings.scss
@@ -1,6 +1,7 @@
 $svg-date-picker-nav-back-button: "data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.331685 6.00121C0.330445 5.82446 0.399256 5.65442 0.523053 5.52832L5.84499 0.198256C5.97188 0.0713149 6.14397 -8.63821e-08 6.32341 -6.72174e-08C6.50285 -4.80527e-08 6.67495 0.071315 6.80183 0.198256C6.92872 0.325198 7 0.497368 7 0.67689C7 0.856412 6.92872 1.02858 6.80183 1.15552L1.94874 6.00121L6.80183 10.8526C6.92745 10.9796 6.99751 11.1512 6.99662 11.3299C6.99572 11.5085 6.92393 11.6794 6.79705 11.8051C6.67016 11.9308 6.49857 12.0009 6.32003 12C6.14148 11.9991 5.97061 11.9273 5.84499 11.8003L0.526881 6.47601C0.401568 6.34983 0.331375 6.17908 0.331685 6.00121Z' fill='%231574A1'/%3E%3C/svg%3E%0A";
 $svg-date-picker-forward-button: "data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.66831 5.99879C6.66955 6.17554 6.60074 6.34558 6.47695 6.47168L1.15501 11.8017C1.02812 11.9287 0.85603 12 0.676587 12C0.497145 12 0.325053 11.9287 0.198168 11.8017C0.0712831 11.6748 7.268e-09 11.5026 8.07183e-09 11.3231C8.87567e-09 11.1436 0.0712831 10.9714 0.198168 10.8445L5.05126 5.99879L0.198168 1.14736C0.0725521 1.02042 0.00248585 0.848755 0.00338306 0.670131C0.00428028 0.491506 0.0760674 0.320554 0.202952 0.194881C0.329837 0.0692091 0.501426 -0.000888818 0.679971 9.54485e-06C0.858515 0.000906955 1.02939 0.0727263 1.15501 0.199668L6.47312 5.52399C6.59843 5.65017 6.66862 5.82092 6.66831 5.99879Z' fill='%231574A1'/%3E%3C/svg%3E%0A";
 $svg-drop-off-alert: "data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_13957_112512)'%3E%3Cpath d='M5.99865 0C4.81147 4.82643e-07 3.65095 0.352111 2.66392 1.01179C1.67688 1.67146 0.907678 2.60907 0.45361 3.70599C-0.000459241 4.80291 -0.11899 6.00986 0.113013 7.17415C0.345015 8.33845 0.917126 9.40778 1.75697 10.2469C2.59682 11.086 3.66666 11.6571 4.83117 11.8881C5.99567 12.119 7.20251 11.9994 8.29902 11.5443C9.39553 11.0893 10.3324 10.3192 10.9912 9.33159C11.65 8.34396 12.0011 7.18313 12 5.99594C11.9971 4.40566 11.3638 2.88142 10.2388 1.75742C9.11375 0.633431 7.58894 0.00143011 5.99865 0V0ZM5.99865 11.2478C4.96135 11.2473 3.94748 10.9392 3.08518 10.3627C2.22288 9.7861 1.55085 8.96685 1.15401 8.00846C0.75718 7.05006 0.653353 5.99554 0.855656 4.97815C1.05796 3.96077 1.55731 3.02618 2.29061 2.29251C3.0239 1.55884 3.95823 1.059 4.97551 0.856176C5.99279 0.653349 7.04737 0.756633 8.00597 1.15297C8.96457 1.54931 9.78416 2.22092 10.3612 3.08293C10.9382 3.94493 11.2467 4.95864 11.2478 5.99594C11.2478 7.38835 10.6949 8.72377 9.71053 9.70861C8.7262 10.6934 7.39106 11.2471 5.99865 11.2478V11.2478Z' fill='%2306577C'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.22736 8.84695C6.30613 8.76818 6.35038 8.66135 6.35038 8.54996V5.30996C6.35038 5.19857 6.30613 5.09174 6.22736 5.01298C6.1486 4.93421 6.04177 4.88996 5.93038 4.88996C5.81899 4.88996 5.71216 4.93421 5.63339 5.01298C5.55463 5.09174 5.51038 5.19857 5.51038 5.30996V8.54996C5.51038 8.66135 5.55463 8.76818 5.63339 8.84695C5.71216 8.92571 5.81899 8.96996 5.93038 8.96996C6.04177 8.96996 6.1486 8.92571 6.22736 8.84695ZM5.69704 3.97918C5.76611 4.02533 5.84731 4.04996 5.93038 4.04996C5.98558 4.05012 6.04026 4.03936 6.09129 4.01831C6.14232 3.99726 6.18868 3.96633 6.22771 3.9273C6.26675 3.88827 6.29768 3.8419 6.31873 3.79088C6.33978 3.73985 6.35053 3.68516 6.35038 3.62996C6.35038 3.54689 6.32574 3.46569 6.27959 3.39662C6.23344 3.32755 6.16785 3.27372 6.0911 3.24193C6.01436 3.21014 5.92991 3.20183 5.84844 3.21803C5.76697 3.23424 5.69213 3.27424 5.63339 3.33298C5.57465 3.39171 5.53465 3.46655 5.51845 3.54802C5.50224 3.6295 5.51056 3.71394 5.54235 3.79069C5.57414 3.86743 5.62797 3.93303 5.69704 3.97918Z' fill='%2306577C'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_13957_112512'%3E%3Crect width='12' height='12' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A";
+$svg-loading-modal-image: "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";
 $svg-shop-list-button-green-availability: "data:image/svg+xml,%3Csvg viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 12C3.19159 12 0.5 9.30841 0.5 6C0.5 2.69159 3.19159 0 6.5 0C9.80841 0 12.5 2.69159 12.5 6C12.5 9.30841 9.80841 12 6.5 12ZM6.5 0.785047C3.62449 0.785047 1.28505 3.12449 1.28505 6C1.28505 8.87551 3.62449 11.215 6.5 11.215C9.37551 11.215 11.715 8.87551 11.715 6C11.715 3.12449 9.37551 0.785047 6.5 0.785047Z' fill='%23006A36'/%3E%3Cpath d='M5.697 7.95252C5.5927 7.95252 5.49289 7.91102 5.41999 7.837L3.90597 6.32299C3.75233 6.16934 3.75233 5.92149 3.90597 5.76785C4.05962 5.6142 4.30747 5.6142 4.46111 5.76785L5.69812 7.00373L8.53999 4.16186C8.69364 4.00822 8.94149 4.00822 9.09513 4.16186C9.24878 4.31551 9.24878 4.56336 9.09513 4.717L5.97626 7.83588C5.90224 7.9099 5.80242 7.9514 5.69925 7.9514L5.697 7.95252Z' fill='%23006A36'/%3E%3C/svg%3E%0A";
 $svg-shop-list-button-orange-availability: "data:image/svg+xml,%3Csvg viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 0C9.81368 0 12.5 2.68632 12.5 6C12.5 9.31368 9.81368 12 6.5 12C3.18632 12 0.5 9.31368 0.5 6C0.5 2.68632 3.18632 0 6.5 0ZM6.5 0.84C3.6548 0.84 1.34 3.1548 1.34 6C1.34 8.8452 3.6548 11.16 6.5 11.16C9.3452 11.16 11.66 8.8452 11.66 6C11.66 3.1548 9.3452 0.84 6.5 0.84ZM7.90018 4.00596C8.06422 3.84204 8.33002 3.84192 8.49406 4.00596C8.6581 4.17 8.6581 4.43592 8.49406 4.59996L7.0939 6L8.49406 7.40004C8.6581 7.56408 8.6581 7.83 8.49406 7.99404C8.4121 8.076 8.30458 8.11704 8.19706 8.11704C8.08966 8.11704 7.98214 8.076 7.90018 7.99404L6.50002 6.594L5.09986 7.99404C5.01778 8.076 4.91038 8.11704 4.80286 8.11704C4.69546 8.11704 4.58794 8.076 4.50598 7.99404C4.34182 7.83 4.34182 7.56408 4.50598 7.40004L5.90614 6L4.50598 4.59996C4.34182 4.43592 4.34182 4.17 4.50598 4.00596C4.66978 3.84192 4.93582 3.84204 5.09986 4.00596L6.50002 5.406L7.90018 4.00596Z' fill='%23E86421'/%3E%3C/svg%3E%0A";
 $svg-update-zip-text-link: "data:image/svg+xml,%3Csvg viewBox='0 0 13 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.49635 1.00142e-07C5.64734 -0.000153295 4.80722 0.175918 4.0274 0.517444C3.24757 0.858969 2.54443 1.35877 1.96099 1.98626C0.765713 3.27588 0.0999756 4.98141 0.0999756 6.75394C0.0999756 8.52646 0.765713 10.232 1.96099 11.5216L5.98324 15.777C6.04954 15.8475 6.12918 15.9036 6.21736 15.9419C6.30555 15.9802 6.40045 16 6.49635 16C6.59225 16 6.68716 15.9802 6.77534 15.9419C6.86353 15.9036 6.94317 15.8475 7.00946 15.777L11.0317 11.52C12.2391 10.2383 12.909 8.52914 12.8999 6.75394C12.9094 4.97818 12.2394 3.26832 11.0317 1.98626C10.4481 1.35899 9.74493 0.859347 8.96514 0.517839C8.18535 0.176331 7.34532 0.000130509 6.49635 1.00142e-07V1.00142e-07ZM6.49635 9.13131C6.02507 9.13131 5.56437 8.98913 5.17251 8.72275C4.78065 8.45637 4.47524 8.07776 4.29488 7.63479C4.11453 7.19181 4.06734 6.70438 4.15928 6.23412C4.25123 5.76387 4.47817 5.33191 4.81142 4.99287C5.14467 4.65384 5.56925 4.42295 6.03148 4.32941C6.49371 4.23587 6.97282 4.28388 7.40823 4.46736C7.84364 4.65085 8.21579 4.96157 8.47762 5.36023C8.73945 5.7589 8.87921 6.2276 8.87921 6.70707C8.87921 7.34974 8.62837 7.96611 8.18185 8.4207C7.73532 8.87528 7.12964 9.13088 6.49794 9.13131H6.49635Z' fill='%231574A1'/%3E%3C/svg%3E%0A";

From 0fc57dedb10bfc02a6de4567415e5dda8a907fb1 Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Mon, 8 Jan 2024 20:59:07 -0500
Subject: [PATCH 4/6] Spinner updates, refactored for back button

---
 .../address-lookup/address-lookup.spec.js     | 16 +++++++++-----
 src/layouts/address-lookup/address-lookup.vue |  7 +------
 .../address-vehicles/address-vehicles.spec.js | 10 ++++++---
 .../address-vehicles/address-vehicles.vue     |  5 +----
 .../capability-questions.vue                  |  2 +-
 .../contact-details/contact-details.spec.js   | 10 +++++----
 .../contact-details/contact-details.vue       | 13 ++----------
 .../coverage-statement/coverage-statement.vue |  2 +-
 .../duplicate-check/duplicate-check.spec.js   | 10 +++++----
 .../duplicate-check/duplicate-check.vue       |  8 +------
 .../license-plate-lookup.spec.js              |  9 +++++---
 .../license-plate-lookup.vue                  |  6 +-----
 .../molding-questions/molding-questions.vue   |  2 +-
 .../order-confirmation/order-confirmation.vue |  5 +----
 src/layouts/part-questions/part-questions.vue |  2 +-
 src/layouts/payment-page/payment-page.vue     |  7 +------
 .../policy-endorsements.spec.js               | 12 ++++++-----
 .../policy-endorsements.vue                   |  5 +----
 .../policy-holder-details.spec.js             |  8 ++++---
 .../policy-holder-details.vue                 |  6 +-----
 .../provider-preference.vue                   |  5 +----
 src/layouts/review-page/review-page.vue       |  5 +----
 src/layouts/schedule-page/schedule-page.vue   |  5 +----
 .../service-location/service-location.spec.js |  8 +++++--
 .../service-location/service-location.vue     |  8 +------
 .../service-packages/service-packages.vue     |  5 +----
 .../tpa-confirmation/tpa-confirmation.vue     |  5 +----
 src/layouts/tpa-search/tpa-search.spec.js     | 12 +++++++----
 src/layouts/tpa-search/tpa-search.vue         |  5 +----
 src/layouts/tpa-submit/tpa-submit.vue         |  7 +------
 src/layouts/vehicle-damage/vehicle-damage.vue | 15 +------------
 .../vehicle-lookup/vehicle-lookup.spec.js     | 21 ++++++++++++-------
 src/layouts/vehicle-lookup/vehicle-lookup.vue |  8 +------
 .../vehicle-parts/vehicle-parts.spec.js       | 12 +++++------
 src/layouts/vehicle-parts/vehicle-parts.vue   |  2 +-
 .../vehicle-selection/vehicle-selection.vue   |  5 +----
 src/layouts/vin-lookup/vin-lookup.spec.js     |  9 +++++---
 src/layouts/vin-lookup/vin-lookup.vue         |  8 +------
 src/mixins/base-mixin.js                      |  5 +++++
 src/mixins/vehicle-questions-mixin.js         |  4 ++--
 src/mixins/vehicle-questions-mixin.spec.js    |  8 +++----
 src/router/index.js                           | 14 ++++++++++++-
 42 files changed, 138 insertions(+), 183 deletions(-)

diff --git a/src/layouts/address-lookup/address-lookup.spec.js b/src/layouts/address-lookup/address-lookup.spec.js
index ddc65015..6bf15d2e 100644
--- a/src/layouts/address-lookup/address-lookup.spec.js
+++ b/src/layouts/address-lookup/address-lookup.spec.js
@@ -2,6 +2,7 @@
 import addressLookup from '@/layouts/address-lookup/address-lookup.vue';
 
 // Supporting Files
+import baseMixin from '@/mixins/base-mixin';
 import settleAllPromises from '@/helpers/layout-helper.js';
 import { shallowMount } from '@vue/test-utils';
 import { getMountOptions } from '@/helpers/unit-test-helper.js';
@@ -84,6 +85,8 @@ function setupMocks({
 
     wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => '');
     wrapper.vm.setCmsContent = jest.fn();
+    wrapper.vm.$router.navigateWithSpinner = jest.fn();
+    wrapper.vm.navigateBack = baseMixin.methods.navigateBack;
     wrapper.vm.$refs.siteFooter.updateButtonText = jest.fn();
     wrapper.vm.$refs.siteFooter.removeLoader = jest.fn();
     wrapper.vm.$refs.siteFooter.disableForwardButton = jest.fn();
@@ -164,7 +167,8 @@ describe('address-lookup.vue', () => {
         });
 
         // eslint-disable-next-line max-len
-        test('if the looking up VIN by address is not allowed in the state selected display the Vin Lookup By HomeAddress Not Allowed Alert',
+        test(
+            'if the looking up VIN by address is not allowed in the state selected display the Vin Lookup By HomeAddress Not Allowed Alert',
             async () => {
             // Arrange
                 const mockRegistrationAddress = {
@@ -208,7 +212,8 @@ describe('address-lookup.vue', () => {
 
                 // Assert
                 expect(wrapper.findComponent({ ref: 'alertVinLookupsByHomeAddressNotAllowed' }).isVisible()).toBe(true);
-            });
+            }
+        );
 
         test('if no vehicles found, display Vin Not Found alert', async () => {
             // Arrange
@@ -251,10 +256,10 @@ describe('address-lookup.vue', () => {
             });
 
             // Act
-            await wrapper.vm.backButtonAction();
+            await wrapper.vm.navigateBack();
 
             // Assert
-            expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+            expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalled();
         });
 
         test('if the car entered matches one of the vehicles found navigate forward', async () => {
@@ -358,7 +363,8 @@ describe('address-lookup.vue', () => {
         });
 
         // eslint-disable-next-line max-len
-        test('if a different vehicle is found than the one entered and the selected glass is not available for that vehicle, navigate back to vehicle-damage page',
+        test(
+            'if a different vehicle is found than the one entered and the selected glass is not available for that vehicle, navigate back to vehicle-damage page',
             async () => {
             // Arrange
                 const mockRegistrationAddress = {
diff --git a/src/layouts/address-lookup/address-lookup.vue b/src/layouts/address-lookup/address-lookup.vue
index 9f86be4e..f040fc93 100644
--- a/src/layouts/address-lookup/address-lookup.vue
+++ b/src/layouts/address-lookup/address-lookup.vue
@@ -62,7 +62,7 @@
                                         :isDisabled="!meta.valid"
                                         :isForwardActionDisabled="!meta.valid"
                                         @ForwardClicked="forwardButtonAction"
-                                        @backClicked="backButtonAction" />
+                                        @backClicked="navigateBack" />
                                 </div>
                             </div>
                         </div>
@@ -205,11 +205,6 @@ export default {
         arePagePrerequisitesValid() {
             return useMainStore().order.vehicle.carId !== null;
         },
-
-        backButtonAction() {
-            // route to move backwards
-            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-        },
         attachCustomEvents() {
             this.prependActionToMethod(this, this.forwardButtonAction, () => {
                 this.pushEventToGA(
diff --git a/src/layouts/address-vehicles/address-vehicles.spec.js b/src/layouts/address-vehicles/address-vehicles.spec.js
index caab2ae3..14d97555 100644
--- a/src/layouts/address-vehicles/address-vehicles.spec.js
+++ b/src/layouts/address-vehicles/address-vehicles.spec.js
@@ -1,4 +1,5 @@
 import addressVehicles from '@/layouts/address-vehicles/address-vehicles.vue';
+import baseMixin from '@/mixins/base-mixin';
 import settleAllPromises from '@/helpers/layout-helper.js';
 import { shallowMount } from '@vue/test-utils';
 import { getMountOptions } from '@/helpers/unit-test-helper.js';
@@ -115,6 +116,8 @@ function setupMocks({
 
     wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => '');
     wrapper.vm.setCmsContent = jest.fn();
+    wrapper.vm.$router.navigateWithSpinner = jest.fn();
+    wrapper.vm.navigateBack = baseMixin.methods.navigateBack;
     wrapper.vm.$refs.siteFooter.updateButtonText = jest.fn();
     wrapper.vm.$refs.siteFooter.removeLoader = jest.fn();
 
@@ -127,10 +130,10 @@ describe('address-vehicles.vue', () => {
         const { wrapper } = setupMocks({});
 
         // Act
-        await wrapper.vm.backButtonAction();
+        await wrapper.vm.navigateBack();
 
         // Assert
-        expect(wrapper.vm.$router.navigate).toBeCalled();
+        expect(wrapper.vm.$router.navigateWithSpinner).toBeCalled();
     });
 
     test('navigateForward should be called if forwardButtonAction is run', async () => {
@@ -190,7 +193,8 @@ describe('address-vehicles.vue', () => {
     });
 
     // eslint-disable-next-line max-len
-    test('Should navigate to CLICKED_FORWARD scenario if carId is different and selected glass not available for vehicle on navigateForward',
+    test(
+        'Should navigate to CLICKED_FORWARD scenario if carId is different and selected glass not available for vehicle on navigateForward',
         async () => {
         // Arrange
             const { wrapper } = setupMocks({});
diff --git a/src/layouts/address-vehicles/address-vehicles.vue b/src/layouts/address-vehicles/address-vehicles.vue
index 4494d938..142eee57 100644
--- a/src/layouts/address-vehicles/address-vehicles.vue
+++ b/src/layouts/address-vehicles/address-vehicles.vue
@@ -56,7 +56,7 @@
         ref="siteFooter"
         cmsWidgetName="SiteFooterWidget"
         :isForwardActionDisabled="!meta.valid"
-        @backClicked="backButtonAction"
+        @backClicked="navigateBack"
         @forwardClicked="forwardButtonAction" />
       </div>
     </div>
@@ -231,9 +231,6 @@ export default {
             }
             return false;
         },
-        backButtonAction() {
-            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-        },
         async forwardButtonAction() {
             const vinLookup = await useMainStore()
                 .lookupVehicleByVin(this.selectedVehicle.vin)
diff --git a/src/layouts/capability-questions/capability-questions.vue b/src/layouts/capability-questions/capability-questions.vue
index 09bfe96c..bfa557f0 100644
--- a/src/layouts/capability-questions/capability-questions.vue
+++ b/src/layouts/capability-questions/capability-questions.vue
@@ -15,7 +15,7 @@
         :validationRules="rules.optionRequired"
         :index="currentGlassIndex"
         @forwardButtonAction="forwardButtonAction"
-        @backClick="navigateBack" />
+        @backClick="navigateBackByVehicleQuestions" />
   </Form>
 </template>
 <script>
diff --git a/src/layouts/contact-details/contact-details.spec.js b/src/layouts/contact-details/contact-details.spec.js
index 0b133e22..9ee0dec4 100644
--- a/src/layouts/contact-details/contact-details.spec.js
+++ b/src/layouts/contact-details/contact-details.spec.js
@@ -4,6 +4,7 @@ import { createTestingPinia } from '@pinia/testing';
 import contactDetails from '@/layouts/contact-details/contact-details.vue';
 
 // Supporting Files
+import baseMixin from '@/mixins/base-mixin';
 import { getMountOptions } from '@/helpers/unit-test-helper.js';
 import { getRandomString, getRandomInt, getRandomBoolean } from '@/helpers/data-generation.js';
 import navigationScenarios from '@/router/router-constants/navigation-scenarios.js';
@@ -234,16 +235,17 @@ describe('contactDetails.vue', () => {
             // Arrange
             const wrapper = shallowMount(contactDetails, getMountOptions({
                 router: {
-                    navigate: jest.fn()
+                    navigateWithSpinner: jest.fn()
                 }
             }));
+            wrapper.vm.navigateBack = baseMixin.methods.navigateBack;
 
             // Act
-            wrapper.vm.backButtonAction();
+            wrapper.vm.navigateBack();
 
             // Assert
-            expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
-            expect(wrapper.vm.$router.navigate)
+            expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalled();
+            expect(wrapper.vm.$router.navigateWithSpinner)
                 .toHaveBeenCalledWith(navigationScenarios.CLICKED_BACK, undefined);
         });
         test('Forward button clicked triggers navigation', () => {
diff --git a/src/layouts/contact-details/contact-details.vue b/src/layouts/contact-details/contact-details.vue
index 6967c2db..3e30c10f 100644
--- a/src/layouts/contact-details/contact-details.vue
+++ b/src/layouts/contact-details/contact-details.vue
@@ -55,7 +55,6 @@
                         checkboxName="requestTextUpdates"
                         buttonID="requestTextUpdates"
                         :checkboxLabel="requestTextUpdatesCheckboxText" />
-
                     <textareaQuestion
                         ref="notesQuestion"
                         v-model="notesForTechnician"
@@ -66,11 +65,10 @@
                         :cmsWidgetName="widget.notesQuestion"
                         maxLength="250"
                         :inputRows="4" />
-
                     <p
                         ref="disclaimerText"
                         class="caption dark-gray mt-6">
-                    {{ textUpdateDisclaimerText }} I also agree to Safelite's
+                        {{ textUpdateDisclaimerText }} I also agree to Safelite's
                         <textLink
                             ref="privacyPolicyLink"
                             class="normal-line-height"
@@ -85,14 +83,13 @@
                             text="Terms of Use"
                             href="//www.safelite.com/terms-of-use" />.
                     </p>
-
                     <siteFooter
                         ref="siteFooter"
                         class="my-5"
                         :cmsWidgetName="widget.siteFooter"
                         :isForwardActionDisabled="!meta.valid"
                         @forwardClicked="forwardButtonAction"
-                        @backClicked="backButtonAction" />
+                        @backClicked="navigateBack" />
                 </div>
             </div>
         </div>
@@ -186,12 +183,6 @@ export default {
     },
     methods:
     {
-        /**
-         * @summary Steps to perform when back button clicked.
-         */
-        backButtonAction() {
-            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-        },
         /**
          * @summary Steps to perform when forward button clicked.
          */
diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
index fa6c419a..15a4c21a 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@@ -87,7 +87,7 @@
                                 class="mt-5"
                                 cmsWidgetName="SiteFooterWidget"
                                 :isForwardActionDisabled="!meta.valid"
-                                @backClicked="navigateBack"
+                                @backClicked="navigateBackByVehicleQuestions"
                                 @forwardClicked="forwardButtonAction" />
                           </div>
                       </div>
diff --git a/src/layouts/duplicate-check/duplicate-check.spec.js b/src/layouts/duplicate-check/duplicate-check.spec.js
index f9138fe9..66d2c3e1 100644
--- a/src/layouts/duplicate-check/duplicate-check.spec.js
+++ b/src/layouts/duplicate-check/duplicate-check.spec.js
@@ -4,6 +4,7 @@ import { createTestingPinia } from '@pinia/testing';
 import duplicateCheck from '@/layouts/duplicate-check/duplicate-check.vue';
 
 // Supporting Files
+import baseMixin from '@/mixins/base-mixin';
 import { getMountOptions } from '@/helpers/unit-test-helper.js';
 import navigationScenarios from '@/router/router-constants/navigation-scenarios.js';
 import { getRandomString } from '@/helpers/data-generation.js';
@@ -333,16 +334,17 @@ describe('duplicateCheck.vue', () => {
             // Arrange
             const wrapper = shallowMount(duplicateCheck, getMountOptions({
                 router: {
-                    navigate: jest.fn()
+                    navigateWithSpinner: jest.fn()
                 }
             }));
+            wrapper.vm.navigateBack = baseMixin.methods.navigateBack;
 
             // Act
-            wrapper.vm.backButtonAction();
+            wrapper.vm.navigateBack();
 
             // Assert
-            expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
-            expect(wrapper.vm.$router.navigate)
+            expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalled();
+            expect(wrapper.vm.$router.navigateWithSpinner)
                 .toHaveBeenCalledWith(navigationScenarios.CLICKED_BACK, undefined);
         });
 
diff --git a/src/layouts/duplicate-check/duplicate-check.vue b/src/layouts/duplicate-check/duplicate-check.vue
index 222309ec..cf228be8 100644
--- a/src/layouts/duplicate-check/duplicate-check.vue
+++ b/src/layouts/duplicate-check/duplicate-check.vue
@@ -33,7 +33,7 @@
                         :cmsWidgetName="widget.siteFooter"
                         :isForwardActionDisabled="!meta.valid"
                         @forwardClicked="forwardButtonAction"
-                        @backClicked="backButtonAction" />
+                        @backClicked="navigateBack" />
                 </div>
             </div>
         </div>
@@ -122,12 +122,6 @@ export default {
         }
     },
     methods: {
-        /**
-         * @summary Steps to perform when back button clicked.
-         */
-        backButtonAction() {
-            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-        },
         /**
          * @summary Steps to perform when forward button clicked.
          */
diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.spec.js b/src/layouts/license-plate-lookup/license-plate-lookup.spec.js
index e174aead..64fa5451 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.spec.js
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.spec.js
@@ -2,6 +2,7 @@
 import licensePlateLookup from '@/layouts/license-plate-lookup/license-plate-lookup.vue';
 
 // Supporting Files
+import baseMixin from '@/mixins/base-mixin';
 import settleAllPromises from '@/helpers/layout-helper.js';
 import { shallowMount } from '@vue/test-utils';
 import { getMountOptions } from '@/helpers/unit-test-helper.js';
@@ -93,6 +94,8 @@ function setupMocks({
 
     wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => '');
     wrapper.vm.setCmsContent = jest.fn();
+    wrapper.vm.$router.navigateWithSpinner = jest.fn();
+    wrapper.vm.navigateBack = baseMixin.methods.navigateBack;
     wrapper.vm.$refs.siteFooter.updateButtonText = jest.fn();
     wrapper.vm.$refs.siteFooter.removeLoader = jest.fn();
     wrapper.vm.$refs.siteFooter.disableForwardButton = jest.fn();
@@ -189,10 +192,10 @@ describe('license-plate-lookup.vue', () => {
                 undefined,
                 (c) => c(wrapper.vm)
             );
-            await wrapper.vm.backButtonAction();
+            await wrapper.vm.navigateBack();
 
             // Assert
-            expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+            expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalled();
         });
 
         test('License plate found and matches entered vehicle => navigateForwardWithSingleCarMatch', async () => {
@@ -213,7 +216,7 @@ describe('license-plate-lookup.vue', () => {
             expect(wrapper.vm.navigateForwardWithSingleCarMatch).toHaveBeenCalledTimes(1);
         });
 
-        // eslint-disable-next-line max-len
+        // eslint-disable-next-line max-len, function-paren-newline
         test('if a different vehicle is found than the one entered and the selected glass is not available for that vehicle, navigate back to vehicle-damage page',
             async () => {
             // Arrange
diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue
index a1b46623..3128d9e9 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.vue
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue
@@ -64,7 +64,7 @@
                                         class="mt-5"
                                         :isForwardActionDisabled="!meta.valid"
                                         cmsWidgetName="SiteFooterWidget"
-                                        @backClicked="backButtonAction"
+                                        @backClicked="navigateBack"
                                         @forwardClicked="forwardButtonAction" />
                                 </div>
                             </div>
@@ -223,10 +223,6 @@ export default {
         loadDefaultsFromStore() {
             this.customerQuestions = this.mainStore.customerData.addressQuestions.state;
         },
-        backButtonAction() {
-            // route to move backwards
-            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-        },
         attachCustomEvents() {
             this.prependActionToMethod(this, this.forwardButtonAction, () => {
                 this.pushEventToGA(
diff --git a/src/layouts/molding-questions/molding-questions.vue b/src/layouts/molding-questions/molding-questions.vue
index 409ff567..db7a7243 100644
--- a/src/layouts/molding-questions/molding-questions.vue
+++ b/src/layouts/molding-questions/molding-questions.vue
@@ -16,7 +16,7 @@
       :validationRules="rules.optionRequired"
       :index="currentGlassIndex"
       @forwardButtonAction="forwardButtonAction"
-      @backClick="navigateBack" />
+      @backClick="navigateBackByVehicleQuestions" />
   </Form>
 </template>
 <script>
diff --git a/src/layouts/order-confirmation/order-confirmation.vue b/src/layouts/order-confirmation/order-confirmation.vue
index 96e40b95..21abb3cf 100644
--- a/src/layouts/order-confirmation/order-confirmation.vue
+++ b/src/layouts/order-confirmation/order-confirmation.vue
@@ -14,7 +14,7 @@
                     cmsWidgetName="SiteFooterWidget"
                     :isForwardActionDisabled="!meta.valid"
                     @ForwardClicked="forwardButtonAction"
-                    @backClicked="backButtonAction" />
+                    @backClicked="navigateBack" />
                 </div>
             </div>
         </div>
@@ -56,9 +56,6 @@ export default {
     },
     methods:
         {
-            backButtonAction() {
-                this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-            },
             forwardButtonAction() {
                 return this.navigateForward();
             },
diff --git a/src/layouts/part-questions/part-questions.vue b/src/layouts/part-questions/part-questions.vue
index eb65c57a..6992d559 100644
--- a/src/layouts/part-questions/part-questions.vue
+++ b/src/layouts/part-questions/part-questions.vue
@@ -14,7 +14,7 @@
             :validationRules="rules.optionRequired"
             :index="currentGlassIndex"
             @forwardButtonAction="forwardButtonAction"
-            @backClick="navigateBack" />
+            @backClick="navigateBackByVehicleQuestions" />
     </Form>
 </template>
 
diff --git a/src/layouts/payment-page/payment-page.vue b/src/layouts/payment-page/payment-page.vue
index 17829835..6e8cfb30 100644
--- a/src/layouts/payment-page/payment-page.vue
+++ b/src/layouts/payment-page/payment-page.vue
@@ -14,7 +14,7 @@
                     cmsWidgetName="SiteFooterWidget"
                     :isForwardActionDisabled="!meta.valid"
                     @ForwardClicked="forwardButtonAction"
-                    @backClicked="backButtonAction" />
+                    @backClicked="navigateBack" />
                 </div>
             </div>
         </div>
@@ -68,14 +68,9 @@ export default {
     },
     methods:
         {
-            backButtonAction() {
-                this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-            },
-
             forwardButtonAction() {
                 this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD, this.$route);
             },
-
             navigateForward() {
             }
         }
diff --git a/src/layouts/policy-endorsements/policy-endorsements.spec.js b/src/layouts/policy-endorsements/policy-endorsements.spec.js
index 7af82ef8..3637eeb3 100644
--- a/src/layouts/policy-endorsements/policy-endorsements.spec.js
+++ b/src/layouts/policy-endorsements/policy-endorsements.spec.js
@@ -2,6 +2,7 @@
 import policyEndorsements from '@/layouts/policy-endorsements/policy-endorsements.vue';
 
 // Supporting Files
+import baseMixin from '@/mixins/base-mixin';
 import { shallowMount } from '@vue/test-utils';
 import { getMountOptions } from '@/helpers/unit-test-helper.js';
 import navigationScenarios from '@/router/router-constants/navigation-scenarios';
@@ -128,16 +129,17 @@ describe('policyEndorsements.vue', () => {
             // Arrange
             const wrapper = shallowMount(policyEndorsements, getMountOptions({
                 router: {
-                    navigate: jest.fn()
+                    navigateWithSpinner: jest.fn()
                 }
             }));
+            wrapper.vm.navigateBack = baseMixin.methods.navigateBack;
 
             // Act
-            wrapper.vm.backButtonAction();
+            wrapper.vm.navigateBack();
 
             // Assert
-            expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
-            expect(wrapper.vm.$router.navigate)
+            expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalled();
+            expect(wrapper.vm.$router.navigateWithSpinner)
                 .toHaveBeenCalledWith(navigationScenarios.CLICKED_BACK, undefined);
         });
         test('Forward button clicked with valid car id triggers navigation', () => {
@@ -170,7 +172,7 @@ describe('policyEndorsements.vue', () => {
             }));
 
             wrapper.setData({
-                hasValidCarId: false,
+                hasValidCarId: false
             });
 
             // Act
diff --git a/src/layouts/policy-endorsements/policy-endorsements.vue b/src/layouts/policy-endorsements/policy-endorsements.vue
index 5fee1ad3..06a2c76f 100644
--- a/src/layouts/policy-endorsements/policy-endorsements.vue
+++ b/src/layouts/policy-endorsements/policy-endorsements.vue
@@ -48,7 +48,7 @@
                         cmsWidgetName="SiteFooterWidget"
                         :isForwardActionDisabled="!meta.valid"
                         @forwardClicked="forwardButtonAction"
-                        @backClicked="backButtonAction" />
+                        @backClicked="navigateBack" />
                 </div>
             </div>
         </div>
@@ -136,9 +136,6 @@ export default {
     },
     methods:
         {
-            backButtonAction() {
-                this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-            },
             async forwardButtonAction() {
                 // TO DO: remove hard coding and update data format once service returns endorsement questions
                 if (this.educatorEndorsement) {
diff --git a/src/layouts/policy-holder-details/policy-holder-details.spec.js b/src/layouts/policy-holder-details/policy-holder-details.spec.js
index 74a551b2..9e035baf 100644
--- a/src/layouts/policy-holder-details/policy-holder-details.spec.js
+++ b/src/layouts/policy-holder-details/policy-holder-details.spec.js
@@ -1,7 +1,7 @@
 import policyHolderDetails from '@/layouts/policy-holder-details/policy-holder-details.vue';
 
 // Supporting files
-// Supporting files
+import baseMixin from '@/mixins/base-mixin';
 import { shallowMount } from '@vue/test-utils';
 import settleAllPromises from '@/helpers/layout-helper.js';
 import { getMountOptions } from '@/helpers/unit-test-helper.js';
@@ -60,6 +60,8 @@ function setupMocks() {
 
     wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => '');
     wrapper.vm.setCmsContent = jest.fn();
+    wrapper.vm.$router.navigateWithSpinner = jest.fn();
+    wrapper.vm.navigateBack = baseMixin.methods.navigateBack;
     wrapper.vm.$refs.siteFooter.updateButtonText = jest.fn();
     wrapper.vm.$refs.siteFooter.removeLoader = jest.fn();
     wrapper.vm.$refs.siteFooter.disableForwardButton = jest.fn();
@@ -91,10 +93,10 @@ describe('navigation', () => {
         });
 
         // Act
-        await wrapper.vm.backButtonAction();
+        await wrapper.vm.navigateBack();
 
         // Assert
-        expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+        expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalled();
     });
 
     test('if the car entered matches one of the vehicles found navigate forward', async () => {
diff --git a/src/layouts/policy-holder-details/policy-holder-details.vue b/src/layouts/policy-holder-details/policy-holder-details.vue
index 21067edd..b1418757 100644
--- a/src/layouts/policy-holder-details/policy-holder-details.vue
+++ b/src/layouts/policy-holder-details/policy-holder-details.vue
@@ -43,7 +43,7 @@
                         cmsWidgetName="SiteFooterWidget"
                         :isForwardActionDisabled="!meta.valid"
                         @ForwardClicked="forwardButtonAction"
-                        @backClicked="backButtonAction" />
+                        @backClicked="navigateBack" />
                 </div>
             </div>
         </div>
@@ -120,10 +120,6 @@ export default {
     },
     methods:
     {
-        backButtonAction() {
-            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-        },
-
         async forwardButtonAction() {
             this.mainStore.updatePolicyHolderDetails(this.customerQuestions);
             return this.navigateForward();
diff --git a/src/layouts/provider-preference/provider-preference.vue b/src/layouts/provider-preference/provider-preference.vue
index b5d76d26..51b57de7 100644
--- a/src/layouts/provider-preference/provider-preference.vue
+++ b/src/layouts/provider-preference/provider-preference.vue
@@ -26,7 +26,7 @@
                         class="mt-5"
                         cmsWidgetName="SiteFooterWidget"
                         :isForwardActionDisabled="isForwardActionDisabled"
-                        @backClicked="backButtonAction"
+                        @backClicked="navigateBack"
                         @forwardClicked="forwardButtonAction" />
                 </div>
             </div>
@@ -166,9 +166,6 @@ export default {
         arePagePrerequisiteValid() {
             return true;
         },
-        backButtonAction() {
-            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-        },
         navigateForward(scenario) {
             this.$router.navigate(scenario, this.$route);
         },
diff --git a/src/layouts/review-page/review-page.vue b/src/layouts/review-page/review-page.vue
index 632b4949..36fcb749 100644
--- a/src/layouts/review-page/review-page.vue
+++ b/src/layouts/review-page/review-page.vue
@@ -83,7 +83,7 @@
                     class="mt-5"
                     cmsWidgetName="SiteFooterWidget"
                     @ForwardClicked="forwardButtonAction"
-                    @backClicked="backButtonAction" />
+                    @backClicked="navigateBack" />
             </div>
         </div>
     </Form>
@@ -253,9 +253,6 @@ export default {
                 && customerReqs
             );
         },
-        backButtonAction() {
-            this.$router.navigate(navigationScenarios.CLICKED_BACK, this.$route);
-        },
         editVehicle() {
             this.$router.navigateWithoutSaving(
                 navigationScenarios.CLICKED_VEHICLE_EDIT,
diff --git a/src/layouts/schedule-page/schedule-page.vue b/src/layouts/schedule-page/schedule-page.vue
index 811a3557..acabea46 100644
--- a/src/layouts/schedule-page/schedule-page.vue
+++ b/src/layouts/schedule-page/schedule-page.vue
@@ -53,7 +53,7 @@
                     class="mt-5"
                     cmsWidgetName="SiteFooterWidget"
                     :isForwardActionDisabled="!meta.valid"
-                    @backClicked="backButtonAction"
+                    @backClicked="navigateBack"
                     @forwardClicked="forwardButtonAction" />
             </div>
         </div>
@@ -456,9 +456,6 @@ export default {
                 }
             }
         },
-        backButtonAction() {
-            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-        },
         forwardButtonAction() {
             this.updateSupportingItems();
             this.mainStore.saveSchedule(this.selectedTimeSlotInfo.timeSlot);
diff --git a/src/layouts/service-location/service-location.spec.js b/src/layouts/service-location/service-location.spec.js
index b3cc8447..187337a6 100644
--- a/src/layouts/service-location/service-location.spec.js
+++ b/src/layouts/service-location/service-location.spec.js
@@ -1,3 +1,4 @@
+import baseMixin from '@/mixins/base-mixin';
 import { shallowMount } from '@vue/test-utils';
 import { getMountOptions } from '@/helpers/unit-test-helper.js';
 import serviceLocation from '@/layouts/service-location/service-location.vue';
@@ -18,6 +19,9 @@ function setupMocks() {
         })
     );
 
+    wrapper.vm.$router.navigateWithSpinner = jest.fn();
+    wrapper.vm.navigateBack = baseMixin.methods.navigateBack;
+
     return { wrapper };
 }
 
@@ -92,10 +96,10 @@ describe('navigation', () => {
         });
 
         // Act
-        await wrapper.vm.backButtonAction();
+        await wrapper.vm.navigateBack();
 
         // Assert
-        expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+        expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalled();
     });
 });
 
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 8288fad5..5571c571 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -86,7 +86,7 @@
                     class="mt-5"
                     cmsWidgetName="SiteFooterWidget"
                     :isForwardActionDisabled="!meta.valid || displayNoShopsAlert"
-                    @backClicked="backButtonAction"
+                    @backClicked="navigateBack"
                     @forwardClicked="forwardButtonAction" />
             </div>
         </div>
@@ -329,12 +329,6 @@ export default {
                 && useMainStore().order.serviceLocation.zipCode !== null
             );
         },
-        backButtonAction() {
-            /**
-             * this.navigationScenarios comes from base-mixin
-             */
-            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-        },
         async reloadShopData(zipCode) {
             await this.$refs.shopQuestion.reloadShopData(zipCode);
         },
diff --git a/src/layouts/service-packages/service-packages.vue b/src/layouts/service-packages/service-packages.vue
index 8fe2993e..7d1aac12 100644
--- a/src/layouts/service-packages/service-packages.vue
+++ b/src/layouts/service-packages/service-packages.vue
@@ -27,7 +27,7 @@
                     <siteFooter
                         cmsWidgetName="SiteFooterWidget"
                         :isForwardActionDisabled="!meta.valid"
-                        @back-clicked="backButtonAction"
+                        @backClicked="navigateBack"
                         @ForwardClicked="forwardButtonAction" />
                 </div>
             </div>
@@ -167,9 +167,6 @@ export default {
         vapsItemsSelectedAction(vapsItemsSelected) {
             this.selectedVaps = vapsItemsSelected;
         },
-        backButtonAction() {
-            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-        },
         forwardButtonAction() {
             const parts = { glassParts: this.pricedGlassParts, supportingItems: this.supportingItems, vaps: this.selectedVaps };
             if (!allGlassPartsAndItemsHavePrices(parts)) {
diff --git a/src/layouts/tpa-confirmation/tpa-confirmation.vue b/src/layouts/tpa-confirmation/tpa-confirmation.vue
index a244a62f..5a0cf4d2 100644
--- a/src/layouts/tpa-confirmation/tpa-confirmation.vue
+++ b/src/layouts/tpa-confirmation/tpa-confirmation.vue
@@ -14,7 +14,7 @@
                     cmsWidgetName="SiteFooterWidget"
                     :isForwardActionDisabled="!meta.valid"
                     @ForwardClicked="forwardButtonAction"
-                    @backClicked="backButtonAction" />
+                    @backClicked="navigateBack" />
                 </div>
             </div>
         </div>
@@ -63,9 +63,6 @@ export default {
     },
     methods:
         {
-            backButtonAction() {
-                this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-            },
             async forwardButtonAction() {
                 return this.navigateForward();
             },
diff --git a/src/layouts/tpa-search/tpa-search.spec.js b/src/layouts/tpa-search/tpa-search.spec.js
index 99754c6b..0d9f74f3 100644
--- a/src/layouts/tpa-search/tpa-search.spec.js
+++ b/src/layouts/tpa-search/tpa-search.spec.js
@@ -4,6 +4,7 @@ import { createTestingPinia } from '@pinia/testing';
 import tpaSearch from '@/layouts/tpa-search/tpa-search.vue';
 
 // Supporting Files
+import baseMixin from '@/mixins/base-mixin';
 import { getMountOptions } from '@/helpers/unit-test-helper.js';
 import { useMainStore } from '@/store';
 import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
@@ -47,6 +48,9 @@ function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRu
     const wrapper = shallowMount(tpaSearch, mountOptions);
     wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {});
     wrapper.vm.setCmsContent = jest.fn();
+    wrapper.vm.$router.navigateWithSpinner = jest.fn();
+    wrapper.vm.navigateBack = baseMixin.methods.navigateBack;
+
     return { wrapper };
 }
 
@@ -345,7 +349,7 @@ describe('TPA search page', () => {
                     mountOptions.mixins = [{
                         methods: {
                             getCmsContent: jest.fn().mockImplementation((widget, field) =>
-                                (widget === 'FilterByQuestion' && field === widgetFields.INPUT_QUESTION_WIDGET.ANSWERS 
+                                (widget === 'FilterByQuestion' && field === widgetFields.INPUT_QUESTION_WIDGET.ANSWERS
                                     ? cmsContent
                                     : ''))
                         }
@@ -366,7 +370,7 @@ describe('TPA search page', () => {
                 mountOptions.mixins = [{
                     methods: {
                         getCmsContent: jest.fn().mockImplementation((widget, field) =>
-                            (widget === 'FilterByQuestion' && field === widgetFields.INPUT_QUESTION_WIDGET.ANSWERS 
+                            (widget === 'FilterByQuestion' && field === widgetFields.INPUT_QUESTION_WIDGET.ANSWERS
                                 ? cmsContent
                                 : ''))
                     }
@@ -957,10 +961,10 @@ describe('TPA search page', () => {
             const { wrapper } = getMountedComponent();
 
             // Act
-            wrapper.vm.backButtonAction();
+            wrapper.vm.navigateBack();
 
             // Assert
-            expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+            expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalled();
         });
         describe('forwardButtonAction', () => {
             test('invokes navigate method with safelite shop scenario when selectedProviderIsSafeliteShop true', async () => {
diff --git a/src/layouts/tpa-search/tpa-search.vue b/src/layouts/tpa-search/tpa-search.vue
index 8ec7742e..3ce478c0 100644
--- a/src/layouts/tpa-search/tpa-search.vue
+++ b/src/layouts/tpa-search/tpa-search.vue
@@ -105,7 +105,7 @@
                         :cmsWidgetName="widget.siteFooter"
                         :isForwardActionDisabled="!meta.valid"
                         @ForwardClicked="forwardButtonAction"
-                        @backClicked="backButtonAction" />
+                        @backClicked="navigateBack" />
                 </div>
             </Form>
         </div>
@@ -337,9 +337,6 @@ export default {
             this.providers = await this.getProviderButtonData();
             this.mapZipCode = this.zipCode;
         },
-        backButtonAction() {
-            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-        },
         forwardButtonAction() {
             const scenario = this.selectedProviderIsSafeliteShop
                 ? this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE_SHOP
diff --git a/src/layouts/tpa-submit/tpa-submit.vue b/src/layouts/tpa-submit/tpa-submit.vue
index 2ddcf5b8..9c14ab78 100644
--- a/src/layouts/tpa-submit/tpa-submit.vue
+++ b/src/layouts/tpa-submit/tpa-submit.vue
@@ -14,7 +14,7 @@
                     cmsWidgetName="SiteFooterWidget"
                     :isForwardActionDisabled="!meta.valid"
                     @ForwardClicked="forwardButtonAction"
-                    @backClicked="backButtonAction" />
+                    @backClicked="navigateBack" />
                 </div>
             </div>
         </div>
@@ -68,14 +68,9 @@ export default {
     },
     methods:
         {
-            backButtonAction() {
-                this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-            },
-
             forwardButtonAction() {
                 return this.navigateForward();
             },
-
             navigateForward() {
                 this.$router.navigate(
                     this.navigationScenarios.CLICKED_FORWARD,
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 0b079174..dd78afc0 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -60,7 +60,7 @@
                                 class="mt-5"
                                 cmsWidgetName="SiteFooterWidget"
                                 :isForwardActionDisabled="!meta.valid"
-                                @backClicked="backButtonAction"
+                                @backClicked="navigateBack"
                                 @forwardClicked="forwardButtonAction" />
                         </div>
                     </div>
@@ -236,12 +236,6 @@ export default {
             }
             return false;
         },
-
-        backButtonAction() {
-            // route to move backwards
-            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-        },
-
         getDamageLocationsFromStore() {
             const glassSelections = [];
 
@@ -268,7 +262,6 @@ export default {
 
             return glassSelections;
         },
-
         getWindshieldOptionsFromStore() {
             const windShieldOptions = {
                 selectedWindshieldDamageType: '',
@@ -315,7 +308,6 @@ export default {
 
             return windShieldOptions;
         },
-
         getDoorSidesFromStore() {
             const doorSides = [];
             if (
@@ -332,7 +324,6 @@ export default {
 
             return doorSides;
         },
-
         getDriverSideReplaceOptionsFromStore() {
             const driverSideReplaceOptions = [];
 
@@ -344,7 +335,6 @@ export default {
 
             return driverSideReplaceOptions;
         },
-
         getPassengerSideReplaceOptionsFromStore() {
             const passengerSideReplaceOptions = [];
 
@@ -356,14 +346,12 @@ export default {
 
             return passengerSideReplaceOptions;
         },
-
         getRearReplaceOptionsFromStore() {
             const rearReplaceOptions = this.mainStore.order.damage
                 .glassToReplace?.filter((glass) => glass.glassLocation === damageLocationsSelected.REAR)[0]?.glassName;
 
             return rearReplaceOptions;
         },
-
         async forwardButtonAction() {
             this.mainStore.saveVehicleDamage(
                 this.isWindshieldRepair,
@@ -403,7 +391,6 @@ export default {
 
             return null;
         },
-
         selectedGlassToReplace() {
             const selectedGlassToReplace = [];
             if (this.isWindshieldDamageLocation && !this.isWindshieldRepair) {
diff --git a/src/layouts/vehicle-lookup/vehicle-lookup.spec.js b/src/layouts/vehicle-lookup/vehicle-lookup.spec.js
index 11978d60..2181213d 100644
--- a/src/layouts/vehicle-lookup/vehicle-lookup.spec.js
+++ b/src/layouts/vehicle-lookup/vehicle-lookup.spec.js
@@ -1,5 +1,6 @@
 /* eslint-env jest */
 import { mount } from '@vue/test-utils';
+import baseMixin from '@/mixins/base-mixin';
 import navigationScenarios from '@/router/router-constants/navigation-scenarios';
 import queryStrings from '@/constants/query-strings';
 import { GaActions } from '@/constants/analytics';
@@ -56,7 +57,8 @@ function setupMocks() {
     };
 
     const mockRouter = {
-        navigate: jest.fn()
+        navigate: jest.fn(),
+        navigateWithSpinner: jest.fn()
     };
 
     const mockIsVinbyAddressPermissibleToBeFalse = {
@@ -105,7 +107,8 @@ function setupMocks() {
                         }),
                         getFooterInfoBoxHeight: jest.fn(() => 80),
                         getPageNameByQueryString: jest.fn(() => 'vehicle-lookup'),
-                        pushEventToGA: jest.fn()
+                        pushEventToGA: jest.fn(),
+                        navigateBack: baseMixin.methods.navigateBack
                     }
                 }
             ],
@@ -121,6 +124,8 @@ function setupMocks() {
         }
     });
 
+    // wrapper.vm.navigateBack = baseMixin.methods.navigateBack;
+
     return { mockRoute, mockRouter, wrapper, mockIsVinbyAddressPermissibleToBeFalse };
 }
 
@@ -178,8 +183,8 @@ describe('vehicle-lookup.vue', () => {
         const { mockRoute, mockRouter, wrapper } = setupMocks();
 
         await wrapper.get('[data-test-id="site-footer-back-button"]').trigger('click');
-        expect(mockRouter.navigate).toHaveBeenCalledTimes(1);
-        expect(mockRouter.navigate)
+        expect(mockRouter.navigateWithSpinner).toHaveBeenCalledTimes(1);
+        expect(mockRouter.navigateWithSpinner)
             .toHaveBeenCalledWith(navigationScenarios.CLICKED_BACK, mockRoute);
     });
 
@@ -264,10 +269,10 @@ describe('vehicle-lookup.vue', () => {
     });
 
     /**
-   * To Do: Error message is not displayed when running test
-   * but in reality it shows up. Need to find out
-   * how to write a test that verifies the error message is displayed.
-   */
+     * To Do: Error message is not displayed when running test
+     * but in reality it shows up. Need to find out
+     * how to write a test that verifies the error message is displayed.
+     */
     // test.only('Error message is diplayed when no selection is made
     // and "Continue" button clicked.', async () => {
     //   const { wrapper } = setupMocks();
diff --git a/src/layouts/vehicle-lookup/vehicle-lookup.vue b/src/layouts/vehicle-lookup/vehicle-lookup.vue
index b869fe18..23278486 100644
--- a/src/layouts/vehicle-lookup/vehicle-lookup.vue
+++ b/src/layouts/vehicle-lookup/vehicle-lookup.vue
@@ -26,7 +26,7 @@
                                         cmsWidgetName="SiteFooterWidget"
                                         :isForwardActionDisabled="isForwardActionDisabled"
                                         class="mt-5"
-                                        @backClicked="backButtonAction"
+                                        @backClicked="navigateBack"
                                         @forwardClicked="forwardButtonAction" />
                                 </div>
                             </div>
@@ -96,12 +96,6 @@ export default {
         arePagePrerequisiteValid() {
             return true;
         },
-        backButtonAction() {
-            /**
-            * this.navigationScenarios comes from base-mixin
-            */
-            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-        },
         forwardButtonAction() {
             switch (this.selectedVinLookupMethod) {
                 case vinLookupMethodSelections.MANUALVIN:
diff --git a/src/layouts/vehicle-parts/vehicle-parts.spec.js b/src/layouts/vehicle-parts/vehicle-parts.spec.js
index 2c273f64..50459f63 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.spec.js
+++ b/src/layouts/vehicle-parts/vehicle-parts.spec.js
@@ -220,7 +220,7 @@ describe('vehicle-parts.vue', () => {
         const { wrapper } = setupMocks({
             mountOptionsMockData: {
                 router: {
-                    navigate: jest.fn()
+                    navigateWithSpinner: jest.fn()
                 },
                 route: {
                     query: {
@@ -238,10 +238,10 @@ describe('vehicle-parts.vue', () => {
             (c) => c(wrapper.vm)
         );
 
-        wrapper.vm.navigateBack();
+        wrapper.vm.navigateBackByVehicleQuestions();
 
         // Assert
-        expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith(
+        expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalledWith(
             navigationScenarios.CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS,
             wrapper.vm.$route
         );
@@ -252,7 +252,7 @@ describe('vehicle-parts.vue', () => {
         const { wrapper } = setupMocks({
             mountOptionsMockData: {
                 router: {
-                    navigate: jest.fn()
+                    navigateWithSpinner: jest.fn()
                 },
                 route: {
                     query: {
@@ -270,10 +270,10 @@ describe('vehicle-parts.vue', () => {
             (c) => c(wrapper.vm)
         );
 
-        wrapper.vm.navigateBack();
+        wrapper.vm.navigateBackByVehicleQuestions();
 
         // Assert
-        expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith(
+        expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalledWith(
             navigationScenarios.CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS,
             wrapper.vm.$route
         );
diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index 52b33ed8..f74e1c96 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -49,7 +49,7 @@
                                     class="mt-5"
                                     cmsWidgetName="SiteFooterWidget"
                                     :isForwardActionDisabled="isForwardActionDisabled"
-                                    @backClicked="navigateBack"
+                                    @backClicked="navigateBackByVehicleQuestions"
                                     @ForwardClicked="forwardButtonAction" />
                                 </div>
                             </div>
diff --git a/src/layouts/vehicle-selection/vehicle-selection.vue b/src/layouts/vehicle-selection/vehicle-selection.vue
index 8b24b152..6e707b49 100644
--- a/src/layouts/vehicle-selection/vehicle-selection.vue
+++ b/src/layouts/vehicle-selection/vehicle-selection.vue
@@ -63,7 +63,7 @@
                                     cmsWidgetName="SiteFooterWidget"
                                     :isForwardActionDisabled="!meta.valid"
                                     @ForwardClicked="forwardButtonAction"
-                                    @backClicked="backButtonAction" />
+                                    @backClicked="navigateBack" />
                            </div>
                        </div>
                    </div>
@@ -181,9 +181,6 @@ export default {
         arePagePrerequisitesValid() {
             return true;
         },
-        backButtonAction() {
-            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-        },
         async forwardButtonAction() {
             return this.navigateForward();
         },
diff --git a/src/layouts/vin-lookup/vin-lookup.spec.js b/src/layouts/vin-lookup/vin-lookup.spec.js
index 71e93dd3..1d94f19e 100644
--- a/src/layouts/vin-lookup/vin-lookup.spec.js
+++ b/src/layouts/vin-lookup/vin-lookup.spec.js
@@ -2,6 +2,7 @@
 import '@testing-library/jest-dom';
 import { flushPromises } from '@vue/test-utils';
 import { render, waitFor } from '@testing-library/vue';
+import baseMixin from '@/mixins/base-mixin';
 import { createTestingPinia } from '@pinia/testing';
 import userEvent from '@testing-library/user-event';
 import errorMessages from '@/constants/error-messages';
@@ -132,7 +133,8 @@ const mockRoute = {
     }
 };
 const mockRouter = {
-    navigate: jest.fn()
+    navigate: jest.fn(),
+    navigateWithSpinner: jest.fn()
 };
 const maska = jest.fn();
 jest.mock('@/helpers/damage-helper', () => ({
@@ -147,6 +149,7 @@ const mountOptions = {
             {
                 methods: {
                     getCmsContent: jest.fn(() => ''),
+                    navigateBack: baseMixin.methods.navigateBack,
                     getFooterInfoBoxHeight: jest.fn(() => 80),
                     cssClassNameForCmsWidget: jest.fn(() => 'widget-name-mock-class'),
                     getPageNameByQueryString: jest.fn(() => ''),
@@ -275,8 +278,8 @@ describe('vin-lookup.vue', () => {
 
             await user.click(backButton);
 
-            expect(mockRouter.navigate).toHaveBeenCalledTimes(1);
-            expect(mockRouter.navigate).toHaveBeenCalledWith(navigationScenarios.CLICKED_BACK, mockRoute);
+            expect(mockRouter.navigateWithSpinner).toHaveBeenCalledTimes(1);
+            expect(mockRouter.navigateWithSpinner).toHaveBeenCalledWith(navigationScenarios.CLICKED_BACK, mockRoute);
         });
 
         // eslint-disable-next-line max-len
diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index f9e9fb9a..625e6663 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -31,7 +31,7 @@
                                         cmsWidgetName="SiteFooterWidget"
                                         :isForwardActionDisabled="!meta.valid"
                                         class="mt-5"
-                                        @backClicked="backButtonAction"
+                                        @backClicked="navigateBack"
                                         @forwardClicked="forwardButtonAction" />
                                 </div>
                             </div>
@@ -166,12 +166,6 @@ export default {
         hasValidCarId() {
             return this.mainStore.vehicle.carId && this.mainStore.vehicle.carId !== '0';
         },
-        backButtonAction() {
-            /**
-             * this.navigationScenarios comes from base-mixin
-             */
-            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-        },
         // NOTE: If form is not valid, this method is not called when 'Continue' button is clicked
         async forwardButtonAction() {
             this.resetActiveAlert();
diff --git a/src/mixins/base-mixin.js b/src/mixins/base-mixin.js
index ff9655ab..49e1e936 100644
--- a/src/mixins/base-mixin.js
+++ b/src/mixins/base-mixin.js
@@ -23,6 +23,11 @@ export default {
             const footerInfoBox = document.querySelector('.footer#infoBox');
             return footerInfoBox ? footerInfoBox.offsetHeight : 0;
         },
+        navigateBack(vm) {
+            const self = vm ?? this;
+
+            self.$router.navigateWithSpinner(this.navigationScenarios.CLICKED_BACK, self.$route);
+        },
         savePageDataToStore(page, data) {
             useMainStore().updatePageData({ page, data });
         },
diff --git a/src/mixins/vehicle-questions-mixin.js b/src/mixins/vehicle-questions-mixin.js
index 0ddac0cf..4cad0395 100644
--- a/src/mixins/vehicle-questions-mixin.js
+++ b/src/mixins/vehicle-questions-mixin.js
@@ -432,7 +432,7 @@ export default {
             }
         },
 
-        navigateBack(vm) {
+        navigateBackByVehicleQuestions(vm) {
             const self = vm ?? this;
             const partsOrQuestions = (
                 self.mainStore.pageData(issPageValues.CAPABILITY_QUESTIONS)
@@ -476,7 +476,7 @@ export default {
                 backNavigationScenario = navigationScenarios.CLICKED_BACK_WITH_PART_QUESTIONS;
             }
 
-            self.$router.navigate(backNavigationScenario, self.$route);
+            self.$router.navigateWithSpinner(backNavigationScenario, self.$route);
         }
     }
 };
diff --git a/src/mixins/vehicle-questions-mixin.spec.js b/src/mixins/vehicle-questions-mixin.spec.js
index 84f0b7bc..385c9953 100644
--- a/src/mixins/vehicle-questions-mixin.spec.js
+++ b/src/mixins/vehicle-questions-mixin.spec.js
@@ -2110,14 +2110,14 @@ describe('vehicle-questions-mixin', () => {
         });
     });
 
-    describe('navigateBack', () => {
+    describe('navigateBackByVehicleQuestions', () => {
         test('current page is coverage-statement and damage is repair => go to vehicle-damage', () => {
             // Arrange
             const { wrapper } = setupMocks({ issPage: issPageValues.COVERAGE_STATEMENT });
             useMainStore().order.damage.isRepair = true;
 
             // Act
-            wrapper.vm.navigateBack();
+            wrapper.vm.navigateBackByVehicleQuestions();
 
             // Assert
             expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith(
@@ -2138,7 +2138,7 @@ describe('vehicle-questions-mixin', () => {
                 wrapper.vm.hasCapabilityQuestions = jest.fn().mockReturnValue(true);
 
                 // Act
-                wrapper.vm.navigateBack();
+                wrapper.vm.navigateBackByVehicleQuestions();
 
                 // Assert
                 expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith(
@@ -2157,7 +2157,7 @@ describe('vehicle-questions-mixin', () => {
             wrapper.vm.hasCapabilityQuestions = jest.fn().mockReturnValue(true);
 
             // Act
-            wrapper.vm.navigateBack();
+            wrapper.vm.navigateBackByVehicleQuestions();
 
             // Assert
             expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith(
diff --git a/src/router/index.js b/src/router/index.js
index e5a07d27..51739f23 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -221,13 +221,21 @@ router.navigate = (
     navigate(scenario, currentRoute, optionalQuery, optionalParams, optionalPageData);
 };
 
+router.navigateWithSpinner = (
+    scenario,
+    currentRoute
+) => {
+    navigate(scenario, currentRoute, undefined, undefined, undefined, true);
+};
+
 // Navigate to the next route, depending on the scenario.
 function navigate(
     scenario,
     currentRoute,
     optionalQuery = {},
     optionalParams = {},
-    optionalPageData = {}
+    optionalPageData = {},
+    forceSpinner = false
 ) {
     if (!scenario) {
         window.console.error('No scenario provided. Please review the routing table.');
@@ -242,6 +250,10 @@ function navigate(
         return;
     }
 
+    if (forceSpinner) {
+        showIssLoadingModal(true);
+    }
+
     if (scenario === navigationScenarios.CLICKED_BACK_PREVIOUS) {
         // Update page to the prevous page in the router.
         // If we need to worry about typing this in from outside of the app,

From 04c386075d8c8275ed62b155ca3afef834fef5b4 Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Tue, 9 Jan 2024 09:34:52 -0500
Subject: [PATCH 5/6] update forgotten test

---
 src/mixins/vehicle-questions-mixin.spec.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/mixins/vehicle-questions-mixin.spec.js b/src/mixins/vehicle-questions-mixin.spec.js
index 385c9953..0a4917ff 100644
--- a/src/mixins/vehicle-questions-mixin.spec.js
+++ b/src/mixins/vehicle-questions-mixin.spec.js
@@ -26,7 +26,8 @@ function setupMocks({ issPage = issPageValues.VIN_LOOKUP }) {
 
     const mocks = getMountOptions({
         router: {
-            navigate: jest.fn()
+            navigate: jest.fn(),
+            navigateWithSpinner: jest.fn()
         },
         route: {
             query: {
@@ -2120,7 +2121,7 @@ describe('vehicle-questions-mixin', () => {
             wrapper.vm.navigateBackByVehicleQuestions();
 
             // Assert
-            expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith(
+            expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalledWith(
                 navigationScenarios.CLICKED_BACK_WITH_REPAIR,
                 { query: { issPage: issPageValues.COVERAGE_STATEMENT } }
             );
@@ -2141,7 +2142,7 @@ describe('vehicle-questions-mixin', () => {
                 wrapper.vm.navigateBackByVehicleQuestions();
 
                 // Assert
-                expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith(
+                expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalledWith(
                     navigationScenarios.CLICKED_BACK_WITH_MULTIPLE_PARTS_TO_CHOOSE,
                     { query: { issPage: issPageValues.MOLDING_QUESTIONS } }
                 );
@@ -2160,7 +2161,7 @@ describe('vehicle-questions-mixin', () => {
             wrapper.vm.navigateBackByVehicleQuestions();
 
             // Assert
-            expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith(
+            expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalledWith(
                 navigationScenarios.CLICKED_BACK_WITH_PART_QUESTIONS,
                 { query: { issPage: issPageValues.MOLDING_QUESTIONS } }
             );

From 070c3f340c33972ed6e2e73b84b03c0279ed02af Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Tue, 9 Jan 2024 10:36:39 -0500
Subject: [PATCH 6/6] Update for service location if there is an error calling
 pricing

---
 .../service-packages/service-packages.vue       | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/layouts/service-packages/service-packages.vue b/src/layouts/service-packages/service-packages.vue
index 7d1aac12..41751482 100644
--- a/src/layouts/service-packages/service-packages.vue
+++ b/src/layouts/service-packages/service-packages.vue
@@ -65,6 +65,7 @@ import { Form } from 'vee-validate';
 import allGlassPartsAndItemsHavePrices from '@/layouts/service-packages/service-package-helper/service-package-helper';
 import globalRules from '@/constants/global-rules';
 import servicePackageQuestion from '@/layouts/service-packages/service-package-question/service-package-question.vue';
+import issPageValues from '@/router/router-constants/issPage-values';
 
 const store = useMainStore();
 
@@ -118,7 +119,21 @@ export default {
             ...clonedGlassParts
         ];
 
-        const pricingResults = await store.getPriceOrderItems(availableLineItems);
+        const pricingResults = await store.getPriceOrderItems(availableLineItems)
+            .catch((err) => {
+                const errorPageData = {
+                    errorData: err.data,
+                    functionLocation: 'beforeRouteEnter',
+                    functionName: 'getPriceOrderItems',
+                    functionParameters: {
+                        availableLineItems
+                    },
+                    routeFrom: from,
+                    routeTo: to
+                };
+                useMainStore().updatePageData({ page: issPageValues.BAILOUT_PAGE, data: errorPageData });
+                next(`/?issPage=${issPageValues.BAILOUT_PAGE}`);
+            });
 
         // Call the "next" function to complete the transition to this page.
         next((vm) => {