From e25425e2a0cf64e52318974e637d50d3be34e63e Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Fri, 27 Oct 2023 14:16:12 -0400
Subject: [PATCH 1/6] This should have the new behavior and keep the old
 behavior

---
 src/App.vue                                   | 18 +++++++++++++
 .../loading-modal/loading-modal.vue           | 26 ++++++++++++++++---
 src/helpers/loading-modal-helper.js           | 18 +++++++++++++
 src/router/index.js                           |  8 ++++++
 4 files changed, 67 insertions(+), 3 deletions(-)
 create mode 100644 src/helpers/loading-modal-helper.js

diff --git a/src/App.vue b/src/App.vue
index aef77fcb0..5f8e54d85 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,15 +5,33 @@
             <component :is="Component" @focusin="handleAnyComponentFocus" />
         </transition>
     </router-view>
+    <loadingModal notFullScreen :showLoader="shouldShowLoader" :showTextCarousel="shouldShowTextCarousel" />
 </template>
 
 <script>
 import { handleAnyComponentFocus } from "@/helpers/button-question-focus-helper";
+import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
+import { showFmgLoadingModal } from "@/helpers/loading-modal-helper";
 export default {
     name: "app",
+    setup() {
+        const { globalNonpersistedState } = showFmgLoadingModal();
+        return { globalNonpersistedState };
+    },
     methods: {
         handleAnyComponentFocus: handleAnyComponentFocus,
     },
+    computed: {
+        shouldShowLoader() {
+            return this.globalNonpersistedState.showLoadingModal;
+        },
+        shouldShowTextCarousel() {
+            return this.globalNonpersistedState.showTextCarousel;
+        },
+    },
+    components: {
+        loadingModal,
+    },
 };
 </script>
 
diff --git a/src/fmg-components/loading-modal/loading-modal.vue b/src/fmg-components/loading-modal/loading-modal.vue
index 8cdf25384..edd757dd5 100644
--- a/src/fmg-components/loading-modal/loading-modal.vue
+++ b/src/fmg-components/loading-modal/loading-modal.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-if="isModalVisible" class="container-fluid modal-loader">
+    <div 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">
                 <div class="row h-100">
@@ -9,7 +9,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="row">
+                <div v-if="showTextCarouselContent" class="row">
                     <div class="col">
                         <div class="text-container slide">
                             <p>
@@ -56,11 +56,31 @@ export default {
     data() {
         return {
             isModalVisible: false,
+            isModalTextCarouselVisible: false,
         };
     },
+    props: {
+        showLoader: {
+            type: Boolean,
+            default: false,
+        },
+        showTextCarousel: {
+            type: Boolean,
+            default: 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(
diff --git a/src/helpers/loading-modal-helper.js b/src/helpers/loading-modal-helper.js
new file mode 100644
index 000000000..d5ab5d91d
--- /dev/null
+++ b/src/helpers/loading-modal-helper.js
@@ -0,0 +1,18 @@
+import { reactive } from "vue";
+
+// state encapsulated and managed by the composable
+const globalNonpersistedState = reactive({
+    showLoadingModal: true,
+    showTextCarousel: false,
+});
+
+export const showFmgLoadingModal = (newValue, showTextCarousel = false) => {
+    if (newValue !== undefined) {
+        globalNonpersistedState.showLoadingModal = newValue;
+    }
+    if (showTextCarousel !== undefined) {
+        globalNonpersistedState.showTextCarousel = showTextCarousel;
+    }
+
+    return { globalNonpersistedState };
+};
diff --git a/src/router/index.js b/src/router/index.js
index 76892f76c..353a23297 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,6 +8,7 @@ import { globalEvents, globalEventTypes } from "@/constants/events";
 import { queryStrings } from "@/constants/query-strings";
 import { getQuerystringParameter } from "@/helpers/querystring-helper";
 import { getDeviceIdValue } from "@/helpers/heritage-integration/cookie-helper";
+import { showFmgLoadingModal } from "@/helpers/loading-modal-helper";
 
 // Heritage integration
 import { isSavedSessionStillActive } from "@/helpers/heritage-integration/session-helper";
@@ -152,6 +153,11 @@ router.beforeEach(async (to, from, next) => {
     // use current page url query string name when to.name is "root" (due to unresolved navigation in beforeEach)
     router.lastNavigationPage = to.name == "root" ? analyticsMixin.methods.getPageName() : to.name;
 
+    const fromQueryPage = from.query?.fmgPage;
+    if (fromQueryPage === undefined) {
+        showFmgLoadingModal(true);
+    }
+
     next();
 });
 
@@ -169,6 +175,8 @@ router.afterEach(async (to, from) => {
         }
     }
 
+    showFmgLoadingModal(false);
+
     // Push page view to GA
     analyticsMixin.methods.pushPageViewToGA();
 

From ab31d642bb53f931f3ab007dc6beddc85a4b2d65 Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Fri, 27 Oct 2023 14:21:49 -0400
Subject: [PATCH 2/6] prettier'd

---
 src/App.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index 5f8e54d85..1797a14da 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,7 +5,10 @@
             <component :is="Component" @focusin="handleAnyComponentFocus" />
         </transition>
     </router-view>
-    <loadingModal notFullScreen :showLoader="shouldShowLoader" :showTextCarousel="shouldShowTextCarousel" />
+    <loadingModal
+        notFullScreen
+        :showLoader="shouldShowLoader"
+        :showTextCarousel="shouldShowTextCarousel" />
 </template>
 
 <script>

From 2d4a1f59b57457f492f6abcc430153aa8eded14d Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Fri, 27 Oct 2023 14:28:52 -0400
Subject: [PATCH 3/6] attribute in a future update

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

diff --git a/src/App.vue b/src/App.vue
index 1797a14da..38f7de099 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,7 +6,6 @@
         </transition>
     </router-view>
     <loadingModal
-        notFullScreen
         :showLoader="shouldShowLoader"
         :showTextCarousel="shouldShowTextCarousel" />
 </template>

From f8a475b13db0c245ff23256309d1e15d048cd14b Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Fri, 27 Oct 2023 14:33:25 -0400
Subject: [PATCH 4/6] prettier'd since less than 3 attr/prop

---
 src/App.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 38f7de099..31fb663c3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,9 +5,7 @@
             <component :is="Component" @focusin="handleAnyComponentFocus" />
         </transition>
     </router-view>
-    <loadingModal
-        :showLoader="shouldShowLoader"
-        :showTextCarousel="shouldShowTextCarousel" />
+    <loadingModal :showLoader="shouldShowLoader" :showTextCarousel="shouldShowTextCarousel" />
 </template>
 
 <script>

From 79b88319e00c664878dd0350064d63f25d6db1fe Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Tue, 31 Oct 2023 16:47:35 -0400
Subject: [PATCH 5/6] prettierd

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

diff --git a/src/fmg-components/loading-modal/loading-modal.vue b/src/fmg-components/loading-modal/loading-modal.vue
index 04e093b36..280f7e6e9 100644
--- a/src/fmg-components/loading-modal/loading-modal.vue
+++ b/src/fmg-components/loading-modal/loading-modal.vue
@@ -11,7 +11,7 @@
                             </div>
                         </div>
                     </div>
-                <div v-if="showTextCarouselContent" class="row">
+                    <div v-if="showTextCarouselContent" class="row">
                         <div class="col">
                             <div class="text-container slide">
                                 <p>

From a5f541ee77364db75b29f20ba2b7d1933fcc0432 Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Tue, 31 Oct 2023 16:54:54 -0400
Subject: [PATCH 6/6] remove hitch-hiker class from merge

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

diff --git a/src/fmg-components/loading-modal/loading-modal.vue b/src/fmg-components/loading-modal/loading-modal.vue
index 280f7e6e9..c3722000b 100644
--- a/src/fmg-components/loading-modal/loading-modal.vue
+++ b/src/fmg-components/loading-modal/loading-modal.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-if="showModalContent" class="container-fluid modal-loader">
+    <div v-if="showModalContent">
         <div v-if="notFullScreen" class="dimmer-overlay"></div>
         <div class="modal-loader" :class="layoutClass">
             <div class="row g-2 h-100 d-flex align-items-center">