Merge branch 'develop' into feature/CSR-628
This commit is contained in:
Katie
commit
df859c87ee
21 changed files with 444 additions and 214 deletions
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<router-view v-slot="{ Component }">
|
||||
<transition :duration="{ enter: 800, leave: 300 }" name="route-fade" mode="out-in">
|
||||
<transition :duration="{ enter: 200, leave: 200 }" name="route-fade" mode="out-in">
|
||||
<!-- The above durations should be kept in sync with the global css class "fade-on-route-transition" -->
|
||||
<component :is="Component" />
|
||||
</transition>
|
||||
</router-view>
|
||||
|
|
|
|||
|
|
@ -52,7 +52,6 @@ import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-bu
|
|||
import listCard from "@/ux-components/list-card/list-card";
|
||||
import { ErrorMessage } from 'vee-validate';
|
||||
import radio from "@/ux-components/radio/radio";
|
||||
import { queryStrings } from "@/constants/query-strings";
|
||||
|
||||
export default {
|
||||
name: "buttonQuestion",
|
||||
|
|
@ -135,8 +134,6 @@ export default {
|
|||
},
|
||||
handleCheckedChanged(val) {
|
||||
|
||||
this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, val.value, true);
|
||||
|
||||
if(this.isMultiSelect && this.selectedValues) {
|
||||
// Add or remove item to array of data to emit
|
||||
const newSelectedValues = this.selectedValues;
|
||||
|
|
|
|||
|
|
@ -1,91 +1,236 @@
|
|||
<template>
|
||||
<div v-if="isModalVisible" class="loading-modal-backdrop">
|
||||
<div class="loading-modal">
|
||||
<section class="loading-modal-body">
|
||||
<div class="modal-icon-container text-center">
|
||||
<object type="image/svg+xml" :data="fmgAnimatedTransition"/>
|
||||
<div v-if="isModalVisible" class="container-fluid modal-loader">
|
||||
<div class="row g-2 h-100 d-flex align-items-center">
|
||||
<div class="container-fluid overflow-hidden">
|
||||
<div class="row h-100">
|
||||
<div class="col text-center tagbg mb-2">
|
||||
<div class="spinner-border text-danger" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="text-container slide">
|
||||
<p>Finishing up
|
||||
<span class="dot-1">.</span>
|
||||
<span class="dot-2">.</span>
|
||||
<span class="dot-3">.</span>
|
||||
</p>
|
||||
<p>Nearly there
|
||||
<span class="dot-1">.</span>
|
||||
<span class="dot-2">.</span>
|
||||
<span class="dot-3">.</span>
|
||||
</p>
|
||||
<p>Generating your quote
|
||||
<span class="dot-1">.</span>
|
||||
<span class="dot-2">.</span>
|
||||
<span class="dot-3">.</span>
|
||||
</p>
|
||||
<p>Finding your glass
|
||||
<span class="dot-1">.</span>
|
||||
<span class="dot-2">.</span>
|
||||
<span class="dot-3">.</span>
|
||||
</p>
|
||||
<p>Assessing your damage
|
||||
<span class="dot-1">.</span>
|
||||
<span class="dot-2">.</span>
|
||||
<span class="dot-3">.</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// load the path like this - <object> data attribute doesn't load the relative path correctly
|
||||
const FMGAnimatedTransition = require("@/assets/img/FMGTransitionAnimation.svg");
|
||||
export default {
|
||||
name: 'Modal',
|
||||
data() {
|
||||
return {
|
||||
isModalVisible: false,
|
||||
fmgAnimatedTransition: FMGAnimatedTransition,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
showModal() {
|
||||
//Display modal
|
||||
this.isModalVisible = true;
|
||||
//Force page reload on back button
|
||||
window.addEventListener("pageshow", function(evt) {
|
||||
if(evt.persisted){
|
||||
export default {
|
||||
name: 'Modal',
|
||||
data() {
|
||||
return {
|
||||
isModalVisible: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
showModal() {
|
||||
//Display modal
|
||||
this.isModalVisible = true;
|
||||
//Force page reload on back button
|
||||
window.addEventListener("pageshow", function(evt) {
|
||||
if(evt.persisted){
|
||||
setTimeout(function(){
|
||||
window.location.reload();
|
||||
}, 10);
|
||||
}
|
||||
}, false);
|
||||
},
|
||||
window.location.reload();
|
||||
}, 10);
|
||||
}
|
||||
}, false);
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.loading-modal-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #e5e5e5;
|
||||
.modal-loader {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1055;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
outline: 0;
|
||||
background: $gray-100;
|
||||
|
||||
.tagbg {
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 32'%3e%3cpath d='M22.39 27.313a3.53 3.53 0 0 0 7.058 0' fill='%23fff'/%3e%3cpath d='M22.39 27.313a3.53 3.53 0 0 0 7.058 0' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M54.459 27.313a3.527 3.527 0 0 0 7.054 0' fill='%23fff'/%3e%3cpath d='M54.459 27.313a3.527 3.527 0 0 0 7.054 0' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M42.06.8c8.08 0 11.89.935 11.89.935 3.58.576 5.696 7.207 5.696 7.207h.727c0-2.427 1.302-2.397 2.341-2 .723.292 1.363.76 1.86 1.361 1.319 1.547.465 1.674.465 1.674h-5.067l3.846 3.01v12.016c0 2.41-2.029 2.31-2.029 2.31H22.338s-2.029.1-2.029-2.31V12.996l3.84-3.009H19.07s-.853-.127.466-1.674a4.693 4.693 0 0 1 1.86-1.361c1.032-.397 2.341-.427 2.341 2h.736s2.117-6.64 5.696-7.21c0 0 3.81-.942 11.89-.942Z' fill='%23fff' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M42.06 8.847c7.924 0 14.685.511 14.685.511 0-2.585-2.38-6.011-2.38-6.011S50.4 2.519 42.06 2.519s-12.303.828-12.303.828-2.38 3.426-2.38 6.011c0 0 6.76-.51 14.683-.51Z' fill='%23DA291C' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M35.277 16.523a62.558 62.558 0 0 1 13.277 0m3.276-.439s2.384-2.257 8.608-2.257c0 0 1.179 2.657-2.54 3.37m-25.894-1.113s-2.387-2.257-8.611-2.257c0 0-1.16 2.579 2.543 3.37m-3.546 5.856s21.52 3.647 39.123 0' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: 96px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1050;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.loading-modal {
|
||||
position: absolute;
|
||||
background: #ffffff;
|
||||
padding: 0 0 32px 0;
|
||||
box-shadow: 2px 2px 20px 1px;
|
||||
overflow: hidden;
|
||||
.spinner-border {
|
||||
width: 6.5rem;
|
||||
height: 6.5rem;
|
||||
border: 0.45em solid currentColor;
|
||||
border-right-color: transparent;
|
||||
}
|
||||
|
||||
.text-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
|
||||
border-radius: 4px;
|
||||
top: 48px;
|
||||
height: 186px;
|
||||
width: 327px;
|
||||
}
|
||||
|
||||
.loading-modal-text {
|
||||
padding: 0 24px 0 24px;
|
||||
}
|
||||
|
||||
.modal-icon-container {
|
||||
margin: 15px auto;
|
||||
padding-bottom: 26px;
|
||||
}
|
||||
|
||||
.modal-icon-container img {
|
||||
width: 350px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
&:after {
|
||||
content: '';
|
||||
background: rgb(245,245,245);
|
||||
background: linear-gradient(270deg, rgba(245,245,245,1) 0%, rgba(245,245,245,0) 5%, rgba(245,245,245,0) 95%, rgba(245,245,245,1) 100%);
|
||||
position: absolute;
|
||||
vertical-align: middle;
|
||||
border: 0;
|
||||
width: 327px;
|
||||
height: 186px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
&.slide p {
|
||||
animation: slide-in 20s ease-in-out 1s forwards 1;
|
||||
}
|
||||
|
||||
|
||||
p {
|
||||
margin: 0 175px;
|
||||
transform: translateX(-2346px);
|
||||
}
|
||||
|
||||
@keyframes slide-in {
|
||||
0% {
|
||||
transform: translateX(-2346px)
|
||||
}
|
||||
11% {
|
||||
transform: translateX(-2010px)
|
||||
}
|
||||
22% {
|
||||
transform: translateX(-2010px)
|
||||
}
|
||||
33% {
|
||||
transform: translateX(-1490px)
|
||||
}
|
||||
44% {
|
||||
transform: translateX(-1490px)
|
||||
}
|
||||
55% {
|
||||
transform: translateX(-985px)
|
||||
}
|
||||
66% {
|
||||
transform: translateX(-985px)
|
||||
}
|
||||
77% {
|
||||
transform: translateX(-490px)
|
||||
}
|
||||
88% {
|
||||
transform: translateX(-490px)
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-40px)
|
||||
}
|
||||
}
|
||||
|
||||
.dot-1 {
|
||||
animation: blinking-elipsis .75s linear infinite;
|
||||
@keyframes blinking-elipsis {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
65% {
|
||||
opacity: 1;
|
||||
}
|
||||
66% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dot-2 {
|
||||
animation: blinking-elipsis-2 .75s linear infinite;
|
||||
@keyframes blinking-elipsis-2 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
21% {
|
||||
opacity: 0;
|
||||
}
|
||||
22% {
|
||||
opacity: 1;
|
||||
}
|
||||
65% {
|
||||
opacity: 1;
|
||||
}
|
||||
66% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dot-3 {
|
||||
animation: blinking-elipsis-3 .75s linear infinite;
|
||||
@keyframes blinking-elipsis-3 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
43% {
|
||||
opacity: 0;
|
||||
}
|
||||
44% {
|
||||
opacity: 1;
|
||||
}
|
||||
65% {
|
||||
opacity: 1;
|
||||
}
|
||||
66% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
1
src/common-components/menu-button/menu-button.spec.js
Normal file
1
src/common-components/menu-button/menu-button.spec.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
test.todo("some test to be written in the future");
|
||||
53
src/common-components/menu-button/menu-button.vue
Normal file
53
src/common-components/menu-button/menu-button.vue
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
<template>
|
||||
<div class="menu-button" :class="[isActive ? 'active' : '']" @click="toggleClass()">
|
||||
<div class="bar1"></div>
|
||||
<div class="bar2"></div>
|
||||
<div class="bar3"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'menuButton',
|
||||
data() {
|
||||
return {
|
||||
isActive: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toggleClass: function(event){
|
||||
this.isActive = !this.isActive;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.menu-button {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.2);
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.bar1,
|
||||
.bar2,
|
||||
.bar3 {
|
||||
width: 14px;
|
||||
height: 2px;
|
||||
background-color: $blue-400;
|
||||
margin: 1px 0;
|
||||
transition: 0.25s;
|
||||
}
|
||||
&.active .bar1 {
|
||||
transform: rotate(-45deg) translate(-3px, 3px);
|
||||
}
|
||||
&.active .bar2 {opacity: 0;}
|
||||
&.active .bar3 {
|
||||
transform: rotate(45deg) translate(-3px, -3px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,17 +3,18 @@ import baseMixin from "@/mixins/base-mixin.js";
|
|||
import { storeActions } from "@/constants/store-actions";
|
||||
|
||||
export function getDamageString() {
|
||||
const damageLocations = store.getters.damage.glassToReplace;
|
||||
// If it's a repair it's always a windshield.
|
||||
const isRepair = store.getters.damage.isRepair;
|
||||
if(isRepair){
|
||||
return "windshield"
|
||||
}
|
||||
|
||||
const damageLocations = store.getters.damage.glassToReplace;
|
||||
|
||||
let returnString;
|
||||
if (!damageLocations) {
|
||||
return;
|
||||
}
|
||||
// If it's a repair it's always a windshield.
|
||||
if(isRepair){
|
||||
return "windshield"
|
||||
}
|
||||
|
||||
if (damageLocations.length > 1) {
|
||||
returnString = "match"
|
||||
|
|
|
|||
|
|
@ -192,6 +192,7 @@ export default ({
|
|||
this.addressModel.zipCode !== null) {
|
||||
|
||||
this.showAddressFields = true;
|
||||
return;
|
||||
}
|
||||
|
||||
const addressField1 = document.getElementById("autocomplete");
|
||||
|
|
@ -230,34 +231,34 @@ export default ({
|
|||
|
||||
})
|
||||
|
||||
addressField1.onchange = function() {
|
||||
const hover = document.querySelector(".pac-container .pac-item:hover");
|
||||
// if an item has been clicked, do nothing, otherwise get first solution and use Geocoder to get the place
|
||||
if (hover === null) {
|
||||
const item = document.querySelector(".pac-container .pac-item");
|
||||
if (item != null) {
|
||||
const firstResult = item.textContent;
|
||||
const geocoder = new window.google.maps.Geocoder();
|
||||
geocoder.geocode({
|
||||
address: firstResult
|
||||
}, function (results, status) {
|
||||
if (status === window.google.maps.GeocoderStatus.OK) {
|
||||
fillInAddress(results[0]);
|
||||
self.displayVerificationWarning = true;
|
||||
self.displayNoMatchWarning = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
else {
|
||||
self.addressModel.city = "";
|
||||
self.addressModel.state = "";
|
||||
self.addressModel.zipCode = "";
|
||||
self.showAddressFields = true;
|
||||
self.displayVerificationWarning = false;
|
||||
self.displayNoMatchWarning = true;
|
||||
}
|
||||
addressField1.onchange = function() {
|
||||
const hover = document.querySelector(".pac-container .pac-item:hover");
|
||||
// if an item has been clicked, do nothing, otherwise get first solution and use Geocoder to get the place
|
||||
if (hover === null) {
|
||||
const item = document.querySelector(".pac-container .pac-item");
|
||||
if (item != null) {
|
||||
const firstResult = item.textContent;
|
||||
const geocoder = new window.google.maps.Geocoder();
|
||||
geocoder.geocode({
|
||||
address: firstResult
|
||||
}, function (results, status) {
|
||||
if (status === window.google.maps.GeocoderStatus.OK) {
|
||||
fillInAddress(results[0]);
|
||||
self.displayVerificationWarning = true;
|
||||
self.displayNoMatchWarning = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
else {
|
||||
self.addressModel.city = "";
|
||||
self.addressModel.state = "";
|
||||
self.addressModel.zipCode = "";
|
||||
self.showAddressFields = true;
|
||||
self.displayVerificationWarning = false;
|
||||
self.displayNoMatchWarning = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function fillInAddress(place) {
|
||||
if (!place) {
|
||||
|
|
@ -265,6 +266,7 @@ export default ({
|
|||
}
|
||||
|
||||
if (place && place.address_components) {
|
||||
self.addressModel.streetAddress= "";
|
||||
self.showAddressFields = true;
|
||||
|
||||
for (const component of place.address_components) {
|
||||
|
|
@ -276,8 +278,7 @@ export default ({
|
|||
break;
|
||||
}
|
||||
case "route": {
|
||||
self.addressModel.streetAddress +=
|
||||
" " + component.short_name;
|
||||
self.addressModel.streetAddress += " " + component.short_name;
|
||||
break;
|
||||
}
|
||||
case "locality": {
|
||||
|
|
@ -286,7 +287,6 @@ export default ({
|
|||
}
|
||||
case "administrative_area_level_1": {
|
||||
self.addressModel.state = component.short_name;
|
||||
// self.addressModel.state = "";
|
||||
break;
|
||||
}
|
||||
case "postal_code": {
|
||||
|
|
@ -311,12 +311,12 @@ export default ({
|
|||
const pacContainer = document.querySelector(".pac-container");
|
||||
pacContainer.remove();
|
||||
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// Failed to fetch script
|
||||
console.log("Unable to load Google Places API script");
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// Failed to fetch script
|
||||
console.log("Unable to load Google Places API script");
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,15 @@
|
|||
<template>
|
||||
<div class="container-fluid container-shadow p-2 rounded-3">
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<h4 class="m-0 p-2 bg-light rounded">Hamburger Menu Button</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<menuButton/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<h4 class="m-0 p-2 bg-light rounded">VIN Information</h4>
|
||||
|
|
@ -1064,81 +1074,6 @@
|
|||
<h6>h6 Heading</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<h4 class="m-0 p-2 bg-light rounded">Alerts</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<alert
|
||||
alertClass="alert-success"
|
||||
alertHeadline="Dismissible Alert"
|
||||
alertCopy="This is an example of a DISMISSIBLE alert. It will fade away and content around it will shift when dismissed."
|
||||
v-bind:isDismissible="true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<alert
|
||||
alertClass="alert-danger"
|
||||
alertHeadline="NON-Dismissible Alert"
|
||||
alertCopy="This is an example of a NON-DISMISSIBLE alert."
|
||||
v-bind:isDismissible="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<alert
|
||||
alertClass="alert-warning"
|
||||
alertHeadline="Warning Alert"
|
||||
alertCopy="This is an example of a WARNING alert."
|
||||
v-bind:isDismissible="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<alert
|
||||
alertClass="alert-info"
|
||||
alertHeadline="Info Alert"
|
||||
alertCopy="This is an example of a INFO alert."
|
||||
v-bind:isDismissible="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<alert
|
||||
alertClass="alert-danger"
|
||||
alertHeadline="Danger Alert"
|
||||
alertCopy="This is an example of a DANGER alert."
|
||||
v-bind:isDismissible="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<alert
|
||||
alertClass="alert-success"
|
||||
alertHeadline="No Body Copy Alert"
|
||||
alertCopy=""
|
||||
v-bind:isDismissible="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<alert
|
||||
alertClass="alert-success"
|
||||
alertHeadline="Multi-Paragraph Alert"
|
||||
:alertCopy="['This is an example of a MULTI-PARAGRAPH alert, which takes an array of strings instead of a single string value for alertCopy.', 'This is the second item in the array of strings.']"
|
||||
v-bind:isDismissible="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -1147,7 +1082,6 @@
|
|||
import buttonBack from "@/common-components/funnel-sub-header/button-back/button-back";
|
||||
import listCard from "@/ux-components/list-card/list-card";
|
||||
import listButton from "@/ux-components/list-button/list-button";
|
||||
import alert from "@/ux-components/alert/alert";
|
||||
import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
|
||||
import checkbox from "@/ux-components/checkbox/checkbox";
|
||||
import radio from "@/ux-components/radio/radio";
|
||||
|
|
@ -1155,6 +1089,7 @@
|
|||
import textboxQuestion from "@/common-components/textbox-question/textbox-question";
|
||||
import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question";
|
||||
import vinInformation from "@/layouts/vin-lookup/vin-information/vin-information";
|
||||
import menuButton from "@/common-components/menu-button/menu-button";
|
||||
export default {
|
||||
name: "App",
|
||||
components: {
|
||||
|
|
@ -1162,7 +1097,6 @@
|
|||
buttonBack,
|
||||
listCard,
|
||||
listButton,
|
||||
alert,
|
||||
listButtonHorizontal,
|
||||
checkbox,
|
||||
radio,
|
||||
|
|
@ -1170,6 +1104,7 @@
|
|||
textboxQuestion,
|
||||
dropdownQuestion,
|
||||
vinInformation,
|
||||
menuButton,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
:selectedDamageLocations="selectedDamageLocations"
|
||||
/>
|
||||
<alert
|
||||
class="my-3"
|
||||
class="my-5"
|
||||
cmsWidgetName="HasReplacementConflict"
|
||||
v-show="hasRepairReplaceConflict"
|
||||
alertClass="alert-danger"
|
||||
|
|
@ -297,12 +297,12 @@ export default {
|
|||
this.navigateForward();
|
||||
},
|
||||
|
||||
navigateForward(){
|
||||
navigateForward(){
|
||||
|
||||
// If vin already exists, navigate directly to vin-lookup
|
||||
if(store.getters.vehicle.vin) {
|
||||
this.$router.navigateAfterSave(this.navigationScenarios.CLICKED_FORWARD_WITH_VIN, this.$route);
|
||||
return;
|
||||
return;
|
||||
}
|
||||
else {
|
||||
this.$router.navigateAfterSave(this.navigationScenarios.CLICKED_FORWARD_WITHOUT_VIN, this.$route);
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
alertClass="alert-danger"
|
||||
:isDismissible="false"
|
||||
/>
|
||||
<windshieldChipCountQuestion cmsWidgetName="WindshieldChipCountQuestion"
|
||||
<windshieldChipCountQuestion cmsWidgetName="WindshieldChipCountQuestion"
|
||||
:isAvailable="isRepairOptionSelected && !hasRepairReplaceConflict"
|
||||
groupName="WindshieldChipCountQuestion"
|
||||
v-model="selectedWindshieldChipCountValues"
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
isRequired
|
||||
/>
|
||||
<alert
|
||||
class="my-3"
|
||||
class="mt-5"
|
||||
cmsWidgetName="SplitSingleConflict"
|
||||
v-if="hasSplitSingleConflict"
|
||||
alertClass="alert-danger"
|
||||
|
|
@ -56,10 +56,10 @@ defineRule("windshield-chip-count-required", required(errorMessages.WINDSHIELD_C
|
|||
defineRule("windshield-replace-options-required", required(errorMessages.WINSHIELD_REPLACE_OPTIONS_REQUIRED));
|
||||
|
||||
defineRule("check-for-repair-and-replace", (value, [otherFieldValue]) => {
|
||||
if (value.toString().toUpperCase().includes(damageLocationsSelected.REPAIR.toUpperCase()) &&
|
||||
otherFieldValue.toString().toUpperCase().includes(damageLocationsSelected.WINDSHIELD.toUpperCase()) &&
|
||||
Array.isArray(otherFieldValue) &&
|
||||
otherFieldValue.length > 1)
|
||||
if (value.toString().toUpperCase().includes(damageLocationsSelected.REPAIR.toUpperCase()) &&
|
||||
otherFieldValue.toString().toUpperCase().includes(damageLocationsSelected.WINDSHIELD.toUpperCase()) &&
|
||||
Array.isArray(otherFieldValue) &&
|
||||
otherFieldValue.length > 1)
|
||||
{
|
||||
return false;
|
||||
}
|
||||
|
|
@ -72,8 +72,8 @@ defineRule("repair-only", (value) => {
|
|||
return false;
|
||||
});
|
||||
defineRule("prevent-split-and-single-together", (value) => {
|
||||
if (value.toString().toUpperCase().includes(damageLocationsSelected.SINGLE.toUpperCase()) &&
|
||||
(value.toString().toUpperCase().includes(damageLocationsSelected.DRIVER.toUpperCase()) ||
|
||||
if (value.toString().toUpperCase().includes(damageLocationsSelected.SINGLE.toUpperCase()) &&
|
||||
(value.toString().toUpperCase().includes(damageLocationsSelected.DRIVER.toUpperCase()) ||
|
||||
value.toString().toUpperCase().includes(damageLocationsSelected.PASSENGER.toUpperCase())))
|
||||
{
|
||||
return false;
|
||||
|
|
@ -145,7 +145,7 @@ export default ({
|
|||
}
|
||||
},
|
||||
isWindshieldDamageLocation() {
|
||||
return this.selectedDamageLocations.some(selectedDamages =>
|
||||
return this.selectedDamageLocations.some(selectedDamages =>
|
||||
{
|
||||
return Boolean(selectedDamages.toUpperCase() === "WINDSHIELD");
|
||||
});
|
||||
|
|
@ -193,4 +193,4 @@ export default ({
|
|||
alert,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@
|
|||
:manualHeadline="PerfectMatchNewVinAlertReadOnlyHeader"
|
||||
:manualCopy="PerfectMatchNewVinAlertReadOnlyBody"
|
||||
v-model="customAlertData"
|
||||
v-if="isVinFieldReadOnly"
|
||||
v-if="isVinFieldReadOnly"
|
||||
alertClass="alert-success"
|
||||
/>
|
||||
<alert
|
||||
|
|
@ -102,7 +102,7 @@
|
|||
:manualHeadline="PerfectMatchNewVinAlertHeader"
|
||||
:manualCopy="PerfectMatchNewVinAlertBody"
|
||||
v-model="customAlertData"
|
||||
v-if="perfectMatchNewVinAlert && !noServiceZip && !vinNotFound && meta.valid"
|
||||
v-if="perfectMatchNewVinAlert && !noServiceZip && !vinNotFound && meta.valid && !isVinFieldReadOnly"
|
||||
alertClass="alert-success"
|
||||
/>
|
||||
<funnelFooter
|
||||
|
|
@ -190,6 +190,7 @@ export default {
|
|||
},
|
||||
watch: {
|
||||
vin() {
|
||||
this.vinNotFound = false;
|
||||
this.$refs.funnelFooter.updateButtonText(
|
||||
this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
|
||||
);
|
||||
|
|
|
|||
|
|
@ -9,12 +9,18 @@ import baseMixin from "@/mixins/base-mixin";
|
|||
export default {
|
||||
methods: {
|
||||
logPageView(pageEvent) {
|
||||
// if the user does not have a session id from the content site, do not log.
|
||||
const sid = getSessionIdValue();
|
||||
if (sid === '00000000-0000-0000-0000-000000000000' || sid == null) {
|
||||
return;
|
||||
}
|
||||
|
||||
const currentPageName = getPageNameByQueryString();
|
||||
var payload = {
|
||||
userId: getDeviceIdValue(),
|
||||
sessionKey: getSessionKeyValue(),
|
||||
pageName: currentPageName,
|
||||
sessionId: getSessionIdValue(),
|
||||
sessionId: sid,
|
||||
action: '',
|
||||
event: pageEvent,
|
||||
shouldUseSessionId: true,
|
||||
|
|
@ -24,12 +30,18 @@ export default {
|
|||
},
|
||||
|
||||
logCustomEvent(category, action, label, value) {
|
||||
// if the user does not have a session id from the content site, do not log.
|
||||
const sid = getSessionIdValue();
|
||||
if (sid === '00000000-0000-0000-0000-000000000000' || sid == null) {
|
||||
return;
|
||||
}
|
||||
|
||||
const currentPageName = getPageNameByQueryString();
|
||||
var payload = {
|
||||
userId: getDeviceIdValue(),
|
||||
sessionKey: getSessionKeyValue(),
|
||||
pageName: currentPageName,
|
||||
sessionId: getSessionIdValue(),
|
||||
sessionId: sid,
|
||||
category: category,
|
||||
action: action,
|
||||
label: label,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import analyticsMixin from "@/mixins/analytics-mixin";
|
||||
import { setupMocksForJsFiles } from "@/helpers/unit-test-helper.js";
|
||||
import { setupMocksForJsFiles, setupCookies } from "@/helpers/unit-test-helper.js";
|
||||
import { storeActions } from "@/constants/store-actions";
|
||||
|
||||
describe("analyticsMixin.js", () => {
|
||||
|
|
@ -14,6 +14,12 @@ describe("analyticsMixin.js", () => {
|
|||
}
|
||||
const mocks = setupMocksForJsFiles(mockData);
|
||||
|
||||
const testCookieValue = {
|
||||
sid: '10000000-0000-0000-0000-000000000001'
|
||||
}
|
||||
|
||||
setupCookies({ funnelCookieValue: JSON.stringify(testCookieValue) });
|
||||
|
||||
analyticsMixin.methods.logPageView(type, payload);
|
||||
|
||||
expect(mocks.baseMixin.methods.dispatchStoreAction).toBeCalled();
|
||||
|
|
|
|||
|
|
@ -126,7 +126,7 @@ const router = createRouter({
|
|||
router.afterEach(async (to, from) => {
|
||||
// Push page view to GA
|
||||
analyticsMixin.methods.pushPageViewToGA(to.query[queryStrings.FMG_PAGE]);
|
||||
|
||||
|
||||
baseMixin.methods.dispatchStoreAction(storeActions.GET_EXPERIMENTS_BY_USER, { userId: getDeviceIdValue() })
|
||||
.then( (response) => {
|
||||
analyticsMixin.methods.pushExperimentsToDataLayer(response.data);
|
||||
|
|
@ -271,4 +271,4 @@ function resetDependentState(component) {
|
|||
return component.default.methods.resetDependentState();
|
||||
}
|
||||
|
||||
export default router;
|
||||
export default router;
|
||||
|
|
|
|||
|
|
@ -12,11 +12,11 @@
|
|||
}
|
||||
|
||||
.route-fade-enter-active .fade-on-route-transition {
|
||||
transition: opacity 0.8s ease;
|
||||
transition: opacity 0.2s ease-out; //This duration should be kept in sync with the app.vue <transition> element attribute
|
||||
}
|
||||
|
||||
.route-fade-leave-active .fade-on-route-transition {
|
||||
transition: opacity 0.3s ease;
|
||||
transition: opacity 0.2s ease-in; //This duration should be kept in sync with the app.vue <transition> element attribute
|
||||
}
|
||||
|
||||
.route-fade-enter-from .fade-on-route-transition,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { shallowMount } from "@vue/test-utils";
|
||||
import listButtonHorizontal from "./list-button-horizontal";
|
||||
import { nextTick } from "vue";
|
||||
import { GaActions } from "@/constants/analytics";
|
||||
|
||||
describe("list-button-horizontal.vue", () => {
|
||||
it("Should return input type checkbox if isMultiSelect is true", async () => {
|
||||
|
|
@ -90,6 +91,13 @@ describe("list-button-horizontal.vue", () => {
|
|||
it("Should return loader enabled true", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listButtonHorizontal, {
|
||||
global: {
|
||||
mocks: {
|
||||
'$route': { query: { fmgPage: 'page-name' } },
|
||||
GaActions: GaActions,
|
||||
pushEventToGA: jest.fn(),
|
||||
}
|
||||
},
|
||||
propsData: {
|
||||
selectingInitiatesLoad: true,
|
||||
},
|
||||
|
|
@ -112,6 +120,13 @@ describe("list-button-horizontal.vue", () => {
|
|||
it("Should return loader color", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listButtonHorizontal, {
|
||||
global: {
|
||||
mocks: {
|
||||
'$route': { query: { fmgPage: 'page-name' } },
|
||||
GaActions: GaActions,
|
||||
pushEventToGA: jest.fn(),
|
||||
}
|
||||
},
|
||||
propsData: {
|
||||
loaderColor: "blue",
|
||||
selectingInitiatesLoad: true,
|
||||
|
|
@ -135,6 +150,13 @@ describe("list-button-horizontal.vue", () => {
|
|||
it("Should return loader position", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listButtonHorizontal, {
|
||||
global: {
|
||||
mocks: {
|
||||
'$route': { query: { fmgPage: 'page-name' } },
|
||||
GaActions: GaActions,
|
||||
pushEventToGA: jest.fn(),
|
||||
}
|
||||
},
|
||||
propsData: {
|
||||
loaderPosition: "right",
|
||||
selectingInitiatesLoad: true,
|
||||
|
|
|
|||
|
|
@ -54,6 +54,7 @@
|
|||
<script>
|
||||
import { useField } from "vee-validate";
|
||||
import loader from "@/ux-components/loader/loader";
|
||||
import { queryStrings } from "@/constants/query-strings";
|
||||
|
||||
export default {
|
||||
name: "listButtonHorizontal",
|
||||
|
|
@ -91,6 +92,10 @@ export default {
|
|||
: this.selectedValues[0];
|
||||
}
|
||||
},
|
||||
unmounted() { // needed to clear this button's selectedValues if it is removed
|
||||
this.checkValue = false;
|
||||
this.handleCheckChange();
|
||||
},
|
||||
methods: {
|
||||
displayLoader() {
|
||||
this.isLoaderDisplayed = true;
|
||||
|
|
@ -116,6 +121,7 @@ export default {
|
|||
this.handleCheckChange();
|
||||
}
|
||||
this.handleChange(this.value);
|
||||
this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true);
|
||||
},
|
||||
handleCheckChange() {
|
||||
const emitEvent = {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { shallowMount } from "@vue/test-utils";
|
||||
import listButton from "./list-button";
|
||||
import { nextTick } from "vue";
|
||||
import { GaActions } from "@/constants/analytics";
|
||||
|
||||
describe("list-button.vue", () => {
|
||||
it("Should return input type checkbox if isMultiSelect is true", async () => {
|
||||
|
|
@ -90,6 +91,13 @@ describe("list-button.vue", () => {
|
|||
it("Should return loader enabled true", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listButton, {
|
||||
global: {
|
||||
mocks: {
|
||||
'$route': { query: { fmgPage: 'page-name' } },
|
||||
GaActions: GaActions,
|
||||
pushEventToGA: jest.fn(),
|
||||
}
|
||||
},
|
||||
propsData: {
|
||||
selectingInitiatesLoad: true,
|
||||
},
|
||||
|
|
@ -109,6 +117,13 @@ describe("list-button.vue", () => {
|
|||
it("Should return loader color", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listButton, {
|
||||
global: {
|
||||
mocks: {
|
||||
'$route': { query: { fmgPage: 'page-name' } },
|
||||
GaActions: GaActions,
|
||||
pushEventToGA: jest.fn(),
|
||||
}
|
||||
},
|
||||
propsData: {
|
||||
loaderColor: "blue",
|
||||
selectingInitiatesLoad: true,
|
||||
|
|
@ -128,6 +143,13 @@ describe("list-button.vue", () => {
|
|||
it("Should return loader position", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listButton, {
|
||||
global: {
|
||||
mocks: {
|
||||
'$route': { query: { fmgPage: 'page-name' } },
|
||||
GaActions: GaActions,
|
||||
pushEventToGA: jest.fn(),
|
||||
}
|
||||
},
|
||||
propsData: {
|
||||
loaderPosition: "right",
|
||||
selectingInitiatesLoad: true,
|
||||
|
|
|
|||
|
|
@ -54,6 +54,7 @@
|
|||
<script>
|
||||
import { useField } from "vee-validate";
|
||||
import loader from "@/ux-components/loader/loader";
|
||||
import { queryStrings } from "@/constants/query-strings";
|
||||
|
||||
export default {
|
||||
name: "listButton",
|
||||
|
|
@ -91,6 +92,10 @@ export default {
|
|||
: this.selectedValues[0];
|
||||
}
|
||||
},
|
||||
unmounted() { // needed to clear this button's selectedValues if it is removed
|
||||
this.checkValue = false;
|
||||
this.handleCheckChange();
|
||||
},
|
||||
methods: {
|
||||
displayLoader() {
|
||||
this.isLoaderDisplayed = true;
|
||||
|
|
@ -116,6 +121,7 @@ export default {
|
|||
this.handleCheckChange();
|
||||
}
|
||||
this.handleChange(this.value);
|
||||
this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true);
|
||||
},
|
||||
handleCheckChange() {
|
||||
const emitEvent = {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { shallowMount } from "@vue/test-utils";
|
||||
import listCard from "./list-card";
|
||||
import { nextTick } from "vue";
|
||||
import { GaActions } from "@/constants/analytics";
|
||||
|
||||
describe("list-card.vue", () => {
|
||||
it("Should return input type checkbox if isMultiSelect is true", async () => {
|
||||
|
|
@ -292,8 +293,16 @@ describe("list-card.vue", () => {
|
|||
});
|
||||
|
||||
it("Should run handleChange if triggerButton is triggered", async () => {
|
||||
|
||||
// Act
|
||||
const wrapper = shallowMount(listCard, {
|
||||
global: {
|
||||
mocks: {
|
||||
'$route': { query: { fmgPage: 'page-name' } },
|
||||
GaActions: GaActions,
|
||||
pushEventToGA: jest.fn(),
|
||||
}
|
||||
},
|
||||
propsData: {
|
||||
selectingInitiatesLoad: false,
|
||||
},
|
||||
|
|
@ -312,6 +321,13 @@ describe("list-card.vue", () => {
|
|||
it("Should run handleCheckChange and displayLoader if triggerButton is triggered and seletingInitiatesLoad is true", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listCard, {
|
||||
global: {
|
||||
mocks: {
|
||||
'$route': { query: { fmgPage: 'page-name' } },
|
||||
GaActions: GaActions,
|
||||
pushEventToGA: jest.fn(),
|
||||
}
|
||||
},
|
||||
propsData: {
|
||||
selectingInitiatesLoad: true,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -61,6 +61,7 @@
|
|||
|
||||
<script>
|
||||
import { useField } from "vee-validate";
|
||||
import { queryStrings } from "@/constants/query-strings";
|
||||
|
||||
export default {
|
||||
name: "listCard",
|
||||
|
|
@ -98,6 +99,10 @@ export default {
|
|||
: this.selectedValues[0];
|
||||
}
|
||||
},
|
||||
unmounted() { // needed to clear this button's selectedValues if it is removed
|
||||
this.checkValue = false;
|
||||
this.handleCheckChange();
|
||||
},
|
||||
computed: {
|
||||
getLabelClasses() {
|
||||
if (this.isWide) {
|
||||
|
|
@ -133,6 +138,7 @@ export default {
|
|||
this.handleCheckChange();
|
||||
}
|
||||
this.handleChange(this.value);
|
||||
this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true);
|
||||
},
|
||||
handleCheckChange() {
|
||||
const emitEvent = {
|
||||
|
|
|
|||
Loading…
Reference in a new issue