jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'develop' into feature/CSR-347

Browse source
This commit is contained in:
Adam Caouette 2022-05-10 10:56:38 -04:00
commit 05bada41b4
14 changed files with 42 additions and 123 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
src/common-components/loading-modal/loading-modal.spec.js
View file

@ -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", () => {
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
}) {
function setupMocks() {
//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 };
}
}

35
src/common-components/loading-modal/loading-modal.vue
View file

@ -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">
Default text
</slot>
Please wait...
</div>
<div class="text-center fs-5 loading-modal-text">
<slot name="subtext">
Default subtext
</slot>
This process can take up 20 seconds.
</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;

11
src/layouts/address-lookup/address-lookup.vue
View file

@ -5,15 +5,8 @@
ref="theForm"
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">
<template v-slot:body>
Please wait...
</template>
<template v-slot:subtext>
This process can take up 20 seconds.
</template>
</loadingModal>
<div class="page-container-grouped-styles">
<loadingModal ref="loadingModal"/>
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" />

21
src/layouts/estimate/estimate.vue
View file

@ -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>

11
src/layouts/license-plate-lookup/license-plate-lookup.vue
View file

@ -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">
<loadingModal :showCloseButton=false :clickOutCloses=false ref="loadingModal">
<template v-slot:body>
Please wait...
</template>
<template v-slot:subtext>
This process can take up 20 seconds.
</template>
</loadingModal>
<div class="page-container-grouped-styles">
<loadingModal ref="loadingModal"/>
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />

2
src/layouts/part-questions/part-questions.vue
View file

@ -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" />

2
src/layouts/vehicle-damage/vehicle-damage.vue
View file

@ -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" />

2
src/layouts/vehicle-make/vehicle-make.vue
View file

@ -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">

2
src/layouts/vehicle-model/vehicle-model.vue
View file

@ -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">

2
src/layouts/vehicle-parts/vehicle-parts.vue
View file

@ -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" />

2
src/layouts/vehicle-style/vehicle-style.vue
View file

@ -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">

2
src/layouts/vehicle-year/vehicle-year.vue
View file

@ -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">

11
src/layouts/vin-lookup/vin-lookup.vue
View file

@ -5,15 +5,8 @@
ref="theForm"
v-slot="{ meta }"
>
<div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
<loadingModal :showCloseButton=false :clickOutCloses=false ref="loadingModal">
<template v-slot:body>
Please wait...
</template>
<template v-slot:subtext>
This process can take up 20 seconds.
</template>
</loadingModal>
<div class="page-container-grouped-styles">
<loadingModal ref="loadingModal"/>
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<vehicleBanner
cmsWidgetName="VehicleBannerWidget"

6
src/styles/common-styles.scss
View file

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