Merge pull request #1481 from Safelite/feature/richardson/CSR-1696.merge-to-dev

Merge pre-cash modal to develop

src/App.vue

@@ -5,15 +5,33 @@
             <component :is="Component" @focusin="handleAnyComponentFocus" />
         </transition>
     </router-view>
+    <loadingModal :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>
 

src/fmg-components/loading-modal/loading-modal.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-if="isModalVisible">
+    <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">
@@ -11,7 +11,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="row">
+                    <div v-if="showTextCarouselContent" class="row">
                         <div class="col">
                             <div class="text-container slide">
                                 <p>
@@ -59,6 +59,7 @@ export default {
     data() {
         return {
             isModalVisible: false,
+            isModalTextCarouselVisible: false,
         };
     },
     props: {
@@ -66,15 +67,30 @@ export default {
             type: Boolean,
             default: false,
         },
+        showLoader: {
+            type: Boolean,
+            default: false,
+        },
+        showTextCarousel: {
+            type: Boolean,
+            default: false,
+        },
     },
     computed: {
         layoutClass() {
             return this.notFullScreen ? "card-layout" : "full-screen container-fluid";
         },
+        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(

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 };
+};

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";
@@ -154,6 +155,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();
 });
 
@@ -171,6 +177,8 @@ router.afterEach(async (to, from) => {
         }
     }
 
+    showFmgLoadingModal(false);
+
     // Push page view to GA
     analyticsMixin.methods.pushPageViewToGA();