Fixing bugs with coverage statement

src/iss-components/loading-modal/loading-modal.spec.js

@@ -5,6 +5,14 @@ import { getMountOptions } from '@/helpers/unit-test-helper.js';
 jest.mock('@/assets/img/loader.gif', () => 'loader.gif');
 jest.mock('@/assets/img/windshield.png', () => 'windshield.png');
 
+function setupMocks() {
+    const mountOptions = getMountOptions({
+    });
+
+    const wrapper = shallowMount(loadingModal, mountOptions);
+    return { wrapper };
+}
+
 describe('loadingModal', () => {
     test('showModal sets modal visible', async () => {
         // Arrange
@@ -18,12 +26,16 @@ describe('loadingModal', () => {
         expect(wrapper.vm.isModalVisible).toEqual(true);
         wrapper.unmount();
     });
-});
+    test('hideModal sets modal invisible', async () => {
+        // Arrange
+        const { wrapper } = setupMocks();
+        wrapper.vm.isModalVisible = true;
 
-function setupMocks() {
+        // Act
-    const mountOptions = getMountOptions({
+        wrapper.vm.hideModal();
-    });
 
-    const wrapper = shallowMount(loadingModal, mountOptions);
+        // Assert
-    return { wrapper };
+        expect(wrapper.vm.isModalVisible).toEqual(false);
-}
+        wrapper.unmount();
+    });
+});

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

@@ -12,7 +12,16 @@
                 <div class="row">
                     <div class="col">
                         <div class="text-container slide">
-                            <p>
+                            <p
+                                v-for="text in textSlides"
+                                :key="text">
+                                {{ text }}
+                                <span class="dot-1">.</span>
+                                <span class="dot-2">.</span>
+                                <span class="dot-3">.</span>
+                            </p>
+
+                            <!-- <p>
                                 Finding shops near you
                                 <span class="dot-1">.</span>
                                 <span class="dot-2">.</span>
@@ -41,7 +50,7 @@
                                 <span class="dot-1">.</span>
                                 <span class="dot-2">.</span>
                                 <span class="dot-3">.</span>
-                            </p>
+                            </p> -->
                         </div>
                     </div>
                 </div>
@@ -52,7 +61,10 @@
 
 <script>
 export default {
-    name: 'Modal',
+    name: 'loading-modal',
+    props: {
+        textSlides: Array
+    },
     data() {
         return {
             isModalVisible: false
@@ -74,6 +86,9 @@ export default {
                 },
                 false
             );
+        },
+        hideModal() {
+            this.isModalVisible = false;
         }
     }
 };

src/iss-components/questions-page-layout/questions-page-layout.vue

@@ -1,7 +1,9 @@
 <template>
     <div :class="`page-container-grouped-styles questions-page`">
         <div class="fade-on-route-transition position-relative">
-            <loadingModal ref="loadingModal" />
+            <loadingModal
+                ref="loadingModal"
+                :textSlides="loadingText" />
             <siteHeader cmsWidgetName="SiteHeaderWidget" />
             <div class="select-car">
                 <div class="container-fluid pb-2">
@@ -52,7 +54,7 @@ import alert from '@/ux-components/alert/alert';
 import questionChain from '@/digital-components/question-chain/question-chain';
 import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header';
 import siteFooter from '@/iss-components/site-footer/site-footer';
-import loadingModal from '@/iss-components/loading-modal/loading-modal.vue';
+import loadingModal from '@/iss-components/loading-modal/loading-modal';
 
 export default {
     name: 'questions-page',
@@ -63,6 +65,7 @@ export default {
         questionsData: Array,
         validationRules: String,
         modelValue: Object,
+        loadingText: Array,
         index: Number
     },
     computed: {

src/layouts/coverage-statement/coverage-statement.vue

@@ -6,6 +6,9 @@
     @invalidSubmit="onInvalidSubmit">
       <div class="page-container-grouped-styles">
           <div class="fade-on-route-transition position-relative">
+              <loadingModal
+                ref="loadingModal"
+                :textSlides="loadingText" />
               <siteHeader cmsWidgetName="SiteHeaderWidget" />
               <div class="select-car">
                   <div class="container-fluid pb-2">
@@ -102,6 +105,7 @@ import recalModal from '@/layouts/coverage-statement/recal-modal/recal-modal';
 import alert from '@/ux-components/alert/alert';
 import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal';
 import buttonQuestion from '@/digital-components/button-question/button-question';
+import loadingModal from '@/iss-components/loading-modal/loading-modal';
 
 // Import Supporting Files
 import { fetchCmsContentForPage, setupModalLinks, processIfStatements } from '@/helpers/cms-content-helper.js';
@@ -124,10 +128,11 @@ export default {
         recalModal,
         alert,
         contentGroupModal,
-        buttonQuestion
+        buttonQuestion,
+        loadingModal
     },
     mixins: [baseFormMixin, vehicleQuestionsMixin],
-    async beforeRouteEnter(to, from, next) {
+    async beforeRouteEnter(to, _from, next) {
         // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
 
@@ -145,18 +150,7 @@ export default {
             }
         ];
 
-        if (useMainStore().policy.policyLookupSuccessful
-        && useMainStore().isClaimRegistrationRequired
-        && !useMainStore().policy.noCoverage) {
-            const registerClaimResponse = await useMainStore().registerClaim();
-            promiseResultMap.push({
-                resultKey: 'registerClaim',
-                promise: registerClaimResponse
-            });
-        }
-
         const resultMap = await settleAllPromises(promiseResultMap);
-
         const clonedGlassParts = store.order.lineItems.glassParts
             ? JSON.parse(JSON.stringify(store.order.lineItems.glassParts))
             : [];
@@ -170,19 +164,21 @@ export default {
         // Call the "next" function to complete the transition to this page.
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
-            vm.pricedGlassParts = clonedGlassParts;
-            vm.supportingItems = resultMap.supportingItems;
             vm.availableLineItems = pricingResults;
         });
     },
     data() {
         return {
             isVerified: store.order.payment.insuranceCoverage.isVerified,
-            supportingItems: [],
-            pricedGlassParts: [],
             availableLineItems: [],
             selectedProvider: '',
             deductibleText: 'Your deductible is:',
+            isLoading: true,
+            loadingText: [
+                'Connecting to your insurance company',
+                'Nearly there',
+                'Finishing up'
+            ],
             rules: {
                 selectionRequired: globalRules.OPTION_REQUIRED
             }
@@ -249,22 +245,16 @@ export default {
             return this.getDeductibleString(this.vehicleDeductible);
         },
         isDeductibleZero() {
-            if (this.coverageVerified && this.verifiedDeductible) {
+            return this.verifiedDeductible && this.vehicleDeductible === 0;
-                return this.vehicleDeductible === 0;
-            }
-            return null;
         },
         deductibleOverZero() {
-            if (this.coverageVerified && this.verifiedDeductible) {
+            return this.verifiedDeductible && !this.isDeductibleZero;
-                return !this.isDeductibleZero;
-            }
-            return null;
         },
         coverageVerified() {
-            return this.isVerified;
+            return useMainStore().order.policy.policyLookupSuccessful;
         },
         coverageUnverified() {
-            return !this.isVerified;
+            return !this.coverageVerified;
         },
         verifiedNoComp() {
             return this.coverageVerified ? store.order.policy.noCoverage : false;
@@ -331,7 +321,19 @@ export default {
         }
     },
     mounted() {
+        this.$refs.loadingModal.showModal();
         setupModalLinks(this);
+        const vm = this;
+        if (useMainStore().policy.coverageVerified
+            && useMainStore().isClaimRegistrationRequired
+            && !useMainStore().policy.noCoverage) {
+            useMainStore().registerClaim().then((r) => {
+                vm.$refs.loadingModal.hideModal();
+                return r;
+            });
+        } else {
+            vm.$refs.loadingModal.hideModal();
+        }
     },
     methods: {
         arePagePrerequisitesValid() {
@@ -344,7 +346,7 @@ export default {
             return this.navigateForward();
         },
         async navigateForward() {
-            if (this.coverageUnverified || this.verifiedDeductible) {
+            if (!this.coverageVerified || this.verifiedDeductible) {
                 this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD,
                     this.$route);
             } else if (this.verifiedITAC || this.verifiedNoComp) {

src/layouts/service-packages/service-packages.vue

@@ -5,8 +5,7 @@
                 <siteHeader cmsWidgetName="SiteHeaderWidget" />
                 <siteSubHeader cmsWidgetName="SiteSubHeaderWidget"
                 justification="left"
-                issContainingPage="service-packages"
+                issContainingPage="service-packages" />
-                />
                 <div class="mx-5">
                     <servicePackageQuestion ref="servicePackage"
                     cmsWidgetName="ServicePackage"
@@ -25,7 +24,9 @@
                 </div>
             </div>
         </div>
-        <loadingModal ref="loadingModal" />
+        <loadingModal
+            ref="loadingModal"
+            :textSlides="loadingText" />
         <contentGroupModal ref="RainDefenseModal" cmsWidgetName="RainDefenseModal" />
         <contentGroupModal ref="FrontWiperModal" cmsWidgetName="FrontWiperModal" />
         <contentGroupModal ref="RearWiperModal" cmsWidgetName="RearWiperModal" />
@@ -112,6 +113,13 @@ export default {
             availableLineItems: [],
             supportingItems: [],
             pricedGlassParts: [],
+            loadingText: [
+                'Finding shops near you',
+                'Looking for dates',
+                'Searching for times',
+                'Nearly there',
+                'Finishing up'
+            ],
             rules: {
                 optionRequired: globalRules.OPTION_REQUIRED
             }

src/layouts/vehicle-lookup/vehicle-lookup.vue

@@ -89,7 +89,6 @@ export default {
         forwardButtonAction() {
             switch (this.selectedVinLookupMethod) {
             case vinLookupMethodSelections.MANUALVIN:
-                useMainStore().updateVehicleVin(null);
                 this.$router.navigate(this.navigationScenarios.SELECTED_MANUAL_VIN, this.$route);
                 break;
             case vinLookupMethodSelections.LICENSEPLATE:

src/layouts/vin-lookup/vin-lookup.vue

@@ -159,7 +159,7 @@ export default {
                     //  because the form itself actually passes its client-side validation.
                     //  SSR-189 Scenario #4.
                     this.$refs.siteFooter.enableForwardAction();
-                    this.bailout = true
+                    this.bailout = true;
                 }
 
                 if (this.bailout) {
@@ -190,8 +190,8 @@ export default {
 
             let isSelectedGlassAvailableForVehicle = true;
             if (this.isCarIdDifferentFromTheStore) {
-                isSelectedGlassAvailableForVehicle =
+                isSelectedGlassAvailableForVehicle
-                await isGlassAvailableForCarId(this.vehicleFromLookup.carId);
+                 = await isGlassAvailableForCarId(this.vehicleFromLookup.carId);
             }
 
             // navigate back to vehicle-damage

src/store/index.js

@@ -381,7 +381,8 @@ export const useMainStore = defineStore({
         // TODO: replace place holder correlationId with the real thing
             const placeHolderCorrelationId = '00000000-0000-0000-0000-000000000000';
             const nonNumberCharRegex = /[^0-9]/g;
-            const order = this.order;
+            const { order } = this;
+            return new Promise((resolve, reject) => {
                 globalMethods.callHttpClient({
                     method: endpoints.RegisterClaim.method,
                     endpoint: endpoints.RegisterClaim.url,
@@ -443,9 +444,12 @@ export const useMainStore = defineStore({
                     } else {
                         this.order.payment.insuranceCoverage.coverageStatus = coverageStatuses.VERIFIED;
                     }
+                    return resolve(response);
                 }, (error) => {
                     this.order.payment.insuranceCoverage.isVerified = false;
                     this.order.payment.insuranceCoverage.coverageStatus = coverageStatuses.PENDING;
+                    return reject(error.response);
+                });
             });
         },
         async lookupVinByPlate(licensePlate, licenseState) {