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

Merging from develop, fixed conflict

Browse source
This commit is contained in:
Leah Schumann 2022-05-10 09:08:58 -04:00
commit 7ffd5121b2
14 changed files with 95 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

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

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

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