Merge pull request #405 from Safelite/feature/CSR-520

Feature/csr 520

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

@@ -17,7 +17,7 @@ jest.mock('@/assets/img/windshield.png', () => 'windshield.png')
 describe("loadingModal", () => {
   test("showModal sets modal visible", async () => {
     // Arrange
-    const { wrapper } = setupMocks({ clickOutCloses: false });
+    const { wrapper } = setupMocks();
     wrapper.vm.isModalVisible = false;
 
     //Act
@@ -30,54 +30,7 @@ describe("loadingModal", () => {
 });
 
 
-describe("loadingModal", () => {
+function setupMocks() {
-  test("closeModal sets modal not visible", async () => {
-    // Arrange
-    const { wrapper } = setupMocks({ clickOutCloses: false });
-    wrapper.vm.isModalVisible = true;
-
-    //Act
-    wrapper.vm.closeModal();
-    
-    // Assert
-    expect(wrapper.vm.isModalVisible).toEqual(false);
-    wrapper.unmount();
-  });
-});
-
-describe("loadingModal", () => {
-  test("canClose calls closeModal", async () => {
-    // Arrange
-    const { wrapper } = setupMocks({ clickOutCloses: true });
-    wrapper.vm.isModalVisible = true;
-
-    //Act
-    wrapper.vm.canClose();
-    
-    // Assert
-    expect(wrapper.vm.isModalVisible).toEqual(false);
-    wrapper.unmount();
-  });
-});
-
-describe("loadingModal", () => {
-  test("canClose does not call closeModal", async () => {
-    // Arrange
-    const { wrapper } = setupMocks({ clickOutCloses: false });
-    wrapper.vm.isModalVisible = true;
-
-    //Act
-    wrapper.vm.canClose();
-    
-    // Assert
-    expect(wrapper.vm.isModalVisible).toEqual(true);
-    wrapper.unmount();
-  });
-});
-
-function setupMocks({
-  clickOutCloses
-}) {
 
    //Mock store
    store.dispatch = jest.fn(() => {});
@@ -89,9 +42,6 @@ function setupMocks({
      },
    });
 
-  //Mock props
-  mountOptions.propsData = { clickOutCloses: clickOutCloses };
   const wrapper = shallowMount(loadingModal, mountOptions);
-
   return { wrapper };
 }

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

@@ -1,21 +1,16 @@
 <template>
-  <div v-show="isModalVisible" class="loading-modal-backdrop" v-on:click="canClose" @close="closeModal">
+  <div v-show="isModalVisible" class="loading-modal-backdrop">
     <div class="loading-modal">
-    <button v-if="showCloseButton" type="button" class="loading-modal-close" @click="closeModal">x</button>
       <section class="loading-modal-body">
         <div class="modal-icon-container text-center">
             <img class="loader-gif" alt="Loading" src="@/assets/img/loader.gif">
             <img class="modal-icon" alt="" src="@/assets/img/windshield.png">
         </div>
         <div class="text-center fw-bold fs-5 loading-modal-text">
-            <slot name="body">
+            Please wait...
-                Default text
-            </slot>
         </div>
         <div class="text-center fs-5 loading-modal-text">
-            <slot name="subtext">
+            This process can take up 20 seconds.
-                Default subtext
-            </slot>
         </div>
        </section>
     </div>
@@ -30,20 +25,10 @@
         isModalVisible: false,
       };
     },
-    props: {
-        showCloseButton:  {type: Boolean, default: false},
-        clickOutCloses:  {type: Boolean, default: false},
-    },
     methods: {
       showModal() {
         this.isModalVisible = true;
       },
-      closeModal() {
-        this.isModalVisible = false;
-      },
-      canClose() {
-        this.clickOutCloses ? this.closeModal() : null;
-      }
     },
   };
 </script>
@@ -88,20 +73,6 @@
       padding: 0 24px 0 24px;
   }
 
-  .loading-modal-close {
-    position: absolute;
-    top: 0;
-    right: 0;
-    border: none;
-    font-size: 20px;
-    padding: 10px;
-    cursor: pointer;
-    font-weight: bold;
-    color: $blue;
-    background: transparent;
-    z-index: 999;
-  }
-
   .modal-icon-container {
     position: relative;
     width: 75px;

src/layouts/address-lookup/address-lookup.vue

@@ -6,14 +6,7 @@
 		v-slot="{ meta }"
 		autocomplete="off" >
 		<div class="page-container-grouped-styles">
-			<loadingModal :showCloseButton=false :clickOutCloses=false ref="loadingModal">
+			<loadingModal ref="loadingModal"/>
-				<template v-slot:body>
-					Please wait...
-				</template>
-				<template v-slot:subtext>
-					This process can take up 20 seconds.
-				</template>
-			</loadingModal>
 			<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
 			<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
 			<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" />	

src/layouts/license-plate-lookup/license-plate-lookup.vue

@@ -1,14 +1,7 @@
 <template>
   <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
     <div class="page-container-grouped-styles">
-      <loadingModal :showCloseButton=false :clickOutCloses=false ref="loadingModal">
+      <loadingModal ref="loadingModal"/>
-        <template v-slot:body>
-          Please wait...
-        </template>
-        <template v-slot:subtext>
-          This process can take up 20 seconds.
-        </template>
-      </loadingModal>
       <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
       <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
       <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />

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

@@ -6,14 +6,7 @@
     v-slot="{ meta }"
   >
     <div class="page-container-grouped-styles">
-      <loadingModal :showCloseButton=false :clickOutCloses=false ref="loadingModal">
+      <loadingModal ref="loadingModal"/>
-        <template v-slot:body>
-          Please wait...
-        </template>
-        <template v-slot:subtext>
-          This process can take up 20 seconds.
-        </template>
-      </loadingModal>
       <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
       <vehicleBanner
         cmsWidgetName="VehicleBannerWidget"