From a9f02cdddc2a623f33677b44cc31379a34857527 Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Mon, 22 Apr 2024 16:10:03 -0400
Subject: [PATCH] LoadingModal updates for coverage statement

Add ability to have textSlides to Global Loading Modal
---
 src/App.vue                                   |  6 +++++-
 src/helpers/loading-modal-helper.js           |  8 +++++--
 .../loading-modal/loading-modal.vue           |  5 ++++-
 .../coverage-statement.spec.js.snap           |  5 -----
 .../coverage-statement/coverage-statement.vue | 21 ++++++++-----------
 5 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a87cca15..eccea8c4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,7 +10,8 @@
   </router-view>
   <loadingModal
     :showLoader="shouldShowLoader"
-    :showTextCarousel="shouldShowTextCarousel" />
+    :showTextCarousel="shouldShowTextCarousel"
+    :textSlides="hasTextSlides" />
 </template>
 
 <script>
@@ -27,6 +28,9 @@ export default {
         return { globalNonpersistedState };
     },
     computed: {
+        hasTextSlides() {
+            return this.globalNonpersistedState.carouselTextSlides;
+        },
         shouldShowLoader() {
             return this.globalNonpersistedState.showLoadingModal;
         },
diff --git a/src/helpers/loading-modal-helper.js b/src/helpers/loading-modal-helper.js
index b7161980..2347393d 100644
--- a/src/helpers/loading-modal-helper.js
+++ b/src/helpers/loading-modal-helper.js
@@ -3,16 +3,20 @@ import { reactive } from 'vue';
 // state encapsulated and managed by the composable
 const globalNonpersistedState = reactive({
     showLoadingModal: true,
-    showTextCarousel: false
+    showTextCarousel: false,
+    carouselTextSlides: []
 });
 
-const showIssLoadingModal = (newValue, showTextCarousel = false) => {
+const showIssLoadingModal = (newValue, showTextCarousel = false, carouselTextSlides = []) => {
     if (newValue !== undefined) {
         globalNonpersistedState.showLoadingModal = newValue;
     }
     if (showTextCarousel !== undefined) {
         globalNonpersistedState.showTextCarousel = showTextCarousel;
     }
+    if (carouselTextSlides !== undefined) {
+        globalNonpersistedState.carouselTextSlides = carouselTextSlides;
+    }
 
     return { globalNonpersistedState };
 };
diff --git a/src/iss-components/loading-modal/loading-modal.vue b/src/iss-components/loading-modal/loading-modal.vue
index 453fbf49..e131d771 100644
--- a/src/iss-components/loading-modal/loading-modal.vue
+++ b/src/iss-components/loading-modal/loading-modal.vue
@@ -38,7 +38,6 @@
 export default {
     name: 'loading-modal',
     props: {
-        textSlides: Array,
         showLoader: {
             type: Boolean,
             default: false
@@ -46,6 +45,10 @@ export default {
         showTextCarousel: {
             type: Boolean,
             default: false
+        },
+        textSlides: {
+            type: Array,
+            default: () => []
         }
     },
     data() {
diff --git a/src/layouts/coverage-statement/__snapshots__/coverage-statement.spec.js.snap b/src/layouts/coverage-statement/__snapshots__/coverage-statement.spec.js.snap
index 660043a6..d3179709 100644
--- a/src/layouts/coverage-statement/__snapshots__/coverage-statement.spec.js.snap
+++ b/src/layouts/coverage-statement/__snapshots__/coverage-statement.spec.js.snap
@@ -4,11 +4,6 @@ exports[`coverageStatement.vue-working returns the initial data 1`] = `
 Object {
   "baseServiceLineItems": Array [],
   "deductibleText": "Your deductible is",
-  "loadingText": Array [
-    "Connecting to your insurance company",
-    "Nearly there",
-    "Finishing up",
-  ],
   "rules": Object {
     "selectionRequired": "option-required",
   },
diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
index b2aa9271..2d488a00 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@@ -7,9 +7,6 @@
         <div class="container-fluid fade-on-route-transition">
             <div class="row justify-content-center">
                 <div class="col-md-6 px-0 px-md-2">
-                    <loadingModal
-                        ref="loadingModal"
-                        :textSlides="loadingText" />
                     <siteHeader
                         ref="siteHeader"
                         cmsWidgetName="SiteHeaderWidget" />
@@ -106,7 +103,6 @@ import recalModal from '@/layouts/coverage-statement/recal-modal/recal-modal.vue
 import alert from '@/ux-components/alert/alert.vue';
 import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal.vue';
 import buttonQuestion from '@/digital-components/button-question/button-question.vue';
-import loadingModal from '@/iss-components/loading-modal/loading-modal.vue';
 import textBlock from '@/digital-components/text-block/text-block.vue';
 import pageVariations from '@/constants/coverage-statement-page-variations';
 
@@ -129,6 +125,7 @@ import coverageStatuses from '@/constants/coverage-statuses';
 import widgetFields from '@/constants/cms-widget-fields.js';
 import getPriceOfLineItems from '@/helpers/price-calculator.js';
 import { formatAmountInDollars } from '@/helpers/text-helper.js';
+import showIssLoadingModal from '@/helpers/loading-modal-helper';
 
 const SAFELITE_PROVIDER = 'Safelite';
 
@@ -143,7 +140,6 @@ export default {
         alert,
         contentGroupModal,
         buttonQuestion,
-        loadingModal,
         textBlock
     },
     mixins: [baseFormMixin, vehicleQuestionsMixin],
@@ -196,14 +192,20 @@ export default {
                 });
         }
 
+        const loadingText = [
+            'Connecting to your insurance company',
+            'Nearly there',
+            'Finishing up'
+        ];
+
         if (!hasBailedOut) {
             // Call the "next" function to complete the transition to this page.
             next((vm) => {
+                showIssLoadingModal(true, true, loadingText);
                 vm.setCmsContent(resultMap.cmsContent);
                 vm.setSupportingItems(resultMap.supportingItems);
                 // eslint-disable-next-line no-param-reassign
                 vm.setBaseServiceLineItems(pricingResults);
-                vm.$refs.loadingModal.showModal();
                 vm.initializeComponent();
                 if (!vm.unverified) {
                     useMainStore().disableKeyFields();
@@ -217,11 +219,6 @@ export default {
             selectedProvider: '',
             deductibleText: 'Your deductible is',
             // TODO update when design team gives appropriate text
-            loadingText: [
-                'Connecting to your insurance company',
-                'Nearly there',
-                'Finishing up'
-            ],
             rules: {
                 selectionRequired: globalRules.OPTION_REQUIRED
             },
@@ -423,7 +420,7 @@ export default {
                     .registerClaim()
                     ?.catch(() => {});
             }
-            this.$refs.loadingModal.hideModal();
+            showIssLoadingModal(false);
         },
         async navigateForward() {
             if (this.isUnverifiedVisible || this.isDeductibleVisible) {