LoadingModal updates for coverage statement

Add ability to have textSlides to Global Loading Modal

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

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

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() {

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",
   },

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) {