Merging from develop, fixed conflict

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

@@ -0,0 +1,47 @@
+import { shallowMount } from "@vue/test-utils";
+import loadingModal from "./loading-modal";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import store from "@/store";
+
+jest.mock(
+  "@/store",
+  () => {
+    return {};
+  },
+  { virtual: true }
+);
+
+jest.mock('@/assets/img/loader.gif', () => 'loader.gif')
+jest.mock('@/assets/img/windshield.png', () => 'windshield.png')
+
+describe("loadingModal", () => {
+  test("showModal sets modal visible", async () => {
+    // Arrange
+    const { wrapper } = setupMocks();
+    wrapper.vm.isModalVisible = false;
+
+    //Act
+    wrapper.vm.showModal();
+    
+    // Assert
+    expect(wrapper.vm.isModalVisible).toEqual(true);
+    wrapper.unmount();
+  });
+});
+
+
+function setupMocks() {
+
+   //Mock store
+   store.dispatch = jest.fn(() => {});
+   store.getters = { };
+   const mountOptions = getMountOptions({
+     store: {
+       dispatch: store.dispatch,
+       getters: store.getters,
+     },
+   });
+
+  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

@@ -1,4 +1,5 @@
 <template>
+<<<<<<< HEAD
 	<Form ref="theForm" @submit="onSubmit" @invalid-submit="onInvalidSubmit" v-slot="{ meta }" autocomplete="off">
 		<div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
 			<loadingModal :showCloseButton=false :clickOutCloses=false ref="loadingModal">
@@ -9,6 +10,16 @@
 					This process can take up 20 seconds.
 				</template>
 			</loadingModal>
+=======
+	<Form
+		@submit="onSubmit"
+		@invalid-submit="onInvalidSubmit"
+		ref="theForm"
+		v-slot="{ meta }"
+		autocomplete="off" >
+		<div class="page-container-grouped-styles">
+			<loadingModal ref="loadingModal"/>
+>>>>>>> develop
 			<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
 			<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
 			<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" />	

src/layouts/estimate/estimate.vue

@@ -5,14 +5,19 @@
     ref="theForm"
     v-slot="{ meta }"
   >
-    <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
+    <div class="page-container-grouped-styles">
       <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
       <vehicleBanner cmsWidgetName="VehicleBannerWidget" />
       <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
       <div class="fade-on-route-transition sub-container make-tall">
+        <alert
+        class=""
+        v-model="customAlertData"
+        alertClass=""
+        cmsWidgetName="AlertVinLookupQuestion"
+      />
         <buttonQuestion
           cmsWidgetName="VinLookupMethod"
-          :questionText="questionText"
           :answers="answersFromCms"
           groupName="vinLookupMethodOption"
           buttonType="listButton"
@@ -39,6 +44,7 @@ import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
 import buttonQuestion from "@/common-components/button-question/button-question";
+import alert from "@/ux-components/alert/alert";
 //Supporting Files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
@@ -126,6 +132,15 @@ export default {
     funnelFooter,
     buttonQuestion,
     Form,
+    alert,
   },
 };
-</script>
+</script>
+
+<style lang="scss">
+  .alert p{
+    font-size: 1rem;
+    font-weight: 500; 
+    color: $black; 
+  }
+</style>

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="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
+    <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/part-questions/part-questions.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="container-fluid shadow rounded-3 p-2 position-relative make-tall">
+<div class="page-container-grouped-styles">
     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
     <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage=false />
     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -5,7 +5,7 @@
       ref="theForm"
       v-slot="{ meta }"
     >
-      <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
+      <div class="page-container-grouped-styles">
         <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
         <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage=false />
         <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />

src/layouts/vehicle-make/vehicle-make.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
+  <div class="page-container-grouped-styles">
     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
     <div class="select-car">
       <div class="select-car-form rounded text-center">

src/layouts/vehicle-model/vehicle-model.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
+  <div class="page-container-grouped-styles">
     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
     <div class="select-car">
       <div class="select-car-form rounded text-center">

src/layouts/vehicle-parts/vehicle-parts.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="container-fluid shadow rounded-3 p-2 position-relative make-tall">
+<div class="page-container-grouped-styles">
     <funnelHeader ref="funnelHeader" cmsWidgetName="FunnelHeaderWidget" />
     <vehicleBanner ref="vehicleBanner" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
     <funnelSubHeader ref="funnelSubHeader" cmsWidgetName="FunnelSubHeaderWidget" />

src/layouts/vehicle-style/vehicle-style.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
+  <div class="page-container-grouped-styles">
     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
     <div class="select-car">
       <div class="select-car-form rounded text-center">

src/layouts/vehicle-year/vehicle-year.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
+  <div class="page-container-grouped-styles">
     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
     <div class="select-car">
       <div class="select-car-form rounded text-center">

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

@@ -5,15 +5,8 @@
     ref="theForm"
     v-slot="{ meta }"
   >
-    <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
+    <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"

src/styles/common-styles.scss

@@ -43,4 +43,8 @@ body {
     height: 1px;
     overflow: hidden;
   }
-}
+
+  .page-container-grouped-styles {
+    @extend .container-fluid, .shadow, .rounded-3, .p-2, .position-relative, .make-tall, .px-5;
+  }
+}