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

Merge branch 'develop' into feature/CSR-628

Browse source
This commit is contained in:
Katie 2022-05-25 15:31:29 -04:00
commit df859c87ee
21 changed files with 444 additions and 214 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/App.vue
View file

@ -1,6 +1,7 @@
<template> <template>
<router-view v-slot="{ Component }"> <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" /> <component :is="Component" />
</transition> </transition>
</router-view> </router-view>

3
src/common-components/button-question/button-question.vue
View file

@ -52,7 +52,6 @@ import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-bu
import listCard from "@/ux-components/list-card/list-card"; import listCard from "@/ux-components/list-card/list-card";
import { ErrorMessage } from 'vee-validate'; import { ErrorMessage } from 'vee-validate';
import radio from "@/ux-components/radio/radio"; import radio from "@/ux-components/radio/radio";
import { queryStrings } from "@/constants/query-strings";
export default { export default {
name: "buttonQuestion", name: "buttonQuestion",
@ -135,8 +134,6 @@ export default {
}, },
handleCheckedChanged(val) { handleCheckedChanged(val) {
this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, val.value, true);
if(this.isMultiSelect && this.selectedValues) { if(this.isMultiSelect && this.selectedValues) {
// Add or remove item to array of data to emit // Add or remove item to array of data to emit
const newSelectedValues = this.selectedValues; const newSelectedValues = this.selectedValues;

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

@ -1,91 +1,236 @@
<template> <template>
<div v-if="isModalVisible" class="loading-modal-backdrop"> <div v-if="isModalVisible" class="container-fluid modal-loader">
<div class="loading-modal"> <div class="row g-2 h-100 d-flex align-items-center">
<section class="loading-modal-body"> <div class="container-fluid overflow-hidden">
<div class="modal-icon-container text-center"> <div class="row h-100">
<object type="image/svg+xml" :data="fmgAnimatedTransition"/> <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> </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>
</div> </div>
</template> </template>
<script> <script>
// load the path like this - <object> data attribute doesn't load the relative path correctly export default {
const FMGAnimatedTransition = require("@/assets/img/FMGTransitionAnimation.svg"); name: 'Modal',
export default { data() {
name: 'Modal', return {
data() { isModalVisible: false,
return { };
isModalVisible: false, },
fmgAnimatedTransition: FMGAnimatedTransition, methods: {
}; showModal() {
}, //Display modal
methods: { this.isModalVisible = true;
showModal() { //Force page reload on back button
//Display modal window.addEventListener("pageshow", function(evt) {
this.isModalVisible = true; if(evt.persisted){
//Force page reload on back button
window.addEventListener("pageshow", function(evt) {
if(evt.persisted){
setTimeout(function(){ setTimeout(function(){
window.location.reload(); window.location.reload();
}, 10); }, 10);
} }
}, false); }, false);
},
}, },
}; },
};
</script> </script>
<style lang="scss"> <style lang="scss">
.loading-modal-backdrop { .modal-loader {
position: fixed; position: fixed;
top: 0; top: 0;
bottom: 0; left: 0;
left: 0; right: 0;
right: 0; bottom: 0;
background-color: #e5e5e5; 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; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
z-index: 1050;
width: 100vw;
height: 100vh;
} }
.loading-modal { .spinner-border {
position: absolute; width: 6.5rem;
background: #ffffff; height: 6.5rem;
padding: 0 0 32px 0; border: 0.45em solid currentColor;
box-shadow: 2px 2px 20px 1px; border-right-color: transparent;
overflow: hidden; }
.text-container {
display: flex; display: flex;
flex-direction: column; width: 350px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); overflow: hidden;
border-radius: 4px; white-space: nowrap;
top: 48px; margin: 0 auto;
height: 186px; position: relative;
width: 327px; &:after {
} content: '';
background: rgb(245,245,245);
.loading-modal-text { 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%);
padding: 0 24px 0 24px;
}
.modal-icon-container {
margin: 15px auto;
padding-bottom: 26px;
}
.modal-icon-container img {
position: absolute; position: absolute;
vertical-align: middle; width: 100%;
border: 0; height: 100%;
width: 327px; z-index: 2;
height: 186px; top: 0;
left: 50%; left: 0;
top: 50%; right: 0;
transform: translate(-50%, -50%); 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> </style>

1
src/common-components/menu-button/menu-button.spec.js Normal file
View 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
View 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>

11
src/helpers/damage-helper.js
View file

@ -3,17 +3,18 @@ import baseMixin from "@/mixins/base-mixin.js";
import { storeActions } from "@/constants/store-actions"; import { storeActions } from "@/constants/store-actions";
export function getDamageString() { 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; const isRepair = store.getters.damage.isRepair;
if(isRepair){
return "windshield"
}
const damageLocations = store.getters.damage.glassToReplace;
let returnString; let returnString;
if (!damageLocations) { if (!damageLocations) {
return; return;
} }
// If it's a repair it's always a windshield.
if(isRepair){
return "windshield"
}
if (damageLocations.length > 1) { if (damageLocations.length > 1) {
returnString = "match" returnString = "match"

72
src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
View file

@ -192,6 +192,7 @@ export default ({
this.addressModel.zipCode !== null) { this.addressModel.zipCode !== null) {
this.showAddressFields = true; this.showAddressFields = true;
return;
} }
const addressField1 = document.getElementById("autocomplete"); const addressField1 = document.getElementById("autocomplete");
@ -230,34 +231,34 @@ export default ({
}) })
addressField1.onchange = function() { addressField1.onchange = function() {
const hover = document.querySelector(".pac-container .pac-item:hover"); 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 an item has been clicked, do nothing, otherwise get first solution and use Geocoder to get the place
if (hover === null) { if (hover === null) {
const item = document.querySelector(".pac-container .pac-item"); const item = document.querySelector(".pac-container .pac-item");
if (item != null) { if (item != null) {
const firstResult = item.textContent; const firstResult = item.textContent;
const geocoder = new window.google.maps.Geocoder(); const geocoder = new window.google.maps.Geocoder();
geocoder.geocode({ geocoder.geocode({
address: firstResult address: firstResult
}, function (results, status) { }, function (results, status) {
if (status === window.google.maps.GeocoderStatus.OK) { if (status === window.google.maps.GeocoderStatus.OK) {
fillInAddress(results[0]); fillInAddress(results[0]);
self.displayVerificationWarning = true; self.displayVerificationWarning = true;
self.displayNoMatchWarning = false; self.displayNoMatchWarning = false;
} }
}); });
}
else {
self.addressModel.city = "";
self.addressModel.state = "";
self.addressModel.zipCode = "";
self.showAddressFields = true;
self.displayVerificationWarning = false;
self.displayNoMatchWarning = true;
}
} }
}; else {
self.addressModel.city = "";
self.addressModel.state = "";
self.addressModel.zipCode = "";
self.showAddressFields = true;
self.displayVerificationWarning = false;
self.displayNoMatchWarning = true;
}
}
};
function fillInAddress(place) { function fillInAddress(place) {
if (!place) { if (!place) {
@ -265,6 +266,7 @@ export default ({
} }
if (place && place.address_components) { if (place && place.address_components) {
self.addressModel.streetAddress= "";
self.showAddressFields = true; self.showAddressFields = true;
for (const component of place.address_components) { for (const component of place.address_components) {
@ -276,8 +278,7 @@ export default ({
break; break;
} }
case "route": { case "route": {
self.addressModel.streetAddress += self.addressModel.streetAddress += " " + component.short_name;
" " + component.short_name;
break; break;
} }
case "locality": { case "locality": {
@ -286,7 +287,6 @@ export default ({
} }
case "administrative_area_level_1": { case "administrative_area_level_1": {
self.addressModel.state = component.short_name; self.addressModel.state = component.short_name;
// self.addressModel.state = "";
break; break;
} }
case "postal_code": { case "postal_code": {
@ -311,12 +311,12 @@ export default ({
const pacContainer = document.querySelector(".pac-container"); const pacContainer = document.querySelector(".pac-container");
pacContainer.remove(); pacContainer.remove();
} }
}) })
.catch(() => { .catch(() => {
// Failed to fetch script // Failed to fetch script
console.log("Unable to load Google Places API script"); console.log("Unable to load Google Places API script");
}); });
} }
}, },
mounted() { mounted() {

89
src/layouts/component-test/component-test.vue
View file

@ -1,5 +1,15 @@
<template> <template>
<div class="container-fluid container-shadow p-2 rounded-3"> <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="row my-4">
<div class="col"> <div class="col">
<h4 class="m-0 p-2 bg-light rounded">VIN Information</h4> <h4 class="m-0 p-2 bg-light rounded">VIN Information</h4>
@ -1064,81 +1074,6 @@
<h6>h6 Heading</h6> <h6>h6 Heading</h6>
</div> </div>
</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> </div>
</template> </template>
@ -1147,7 +1082,6 @@
import buttonBack from "@/common-components/funnel-sub-header/button-back/button-back"; import buttonBack from "@/common-components/funnel-sub-header/button-back/button-back";
import listCard from "@/ux-components/list-card/list-card"; import listCard from "@/ux-components/list-card/list-card";
import listButton from "@/ux-components/list-button/list-button"; 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 listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
import checkbox from "@/ux-components/checkbox/checkbox"; import checkbox from "@/ux-components/checkbox/checkbox";
import radio from "@/ux-components/radio/radio"; import radio from "@/ux-components/radio/radio";
@ -1155,6 +1089,7 @@
import textboxQuestion from "@/common-components/textbox-question/textbox-question"; import textboxQuestion from "@/common-components/textbox-question/textbox-question";
import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question"; import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question";
import vinInformation from "@/layouts/vin-lookup/vin-information/vin-information"; import vinInformation from "@/layouts/vin-lookup/vin-information/vin-information";
import menuButton from "@/common-components/menu-button/menu-button";
export default { export default {
name: "App", name: "App",
components: { components: {
@ -1162,7 +1097,6 @@
buttonBack, buttonBack,
listCard, listCard,
listButton, listButton,
alert,
listButtonHorizontal, listButtonHorizontal,
checkbox, checkbox,
radio, radio,
@ -1170,6 +1104,7 @@
textboxQuestion, textboxQuestion,
dropdownQuestion, dropdownQuestion,
vinInformation, vinInformation,
menuButton,
}, },
data() { data() {
return { return {

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

@ -32,7 +32,7 @@
:selectedDamageLocations="selectedDamageLocations" :selectedDamageLocations="selectedDamageLocations"
/> />
<alert <alert
class="my-3" class="my-5"
cmsWidgetName="HasReplacementConflict" cmsWidgetName="HasReplacementConflict"
v-show="hasRepairReplaceConflict" v-show="hasRepairReplaceConflict"
alertClass="alert-danger" alertClass="alert-danger"
@ -297,12 +297,12 @@ export default {
this.navigateForward(); this.navigateForward();
}, },
navigateForward(){ navigateForward(){
// If vin already exists, navigate directly to vin-lookup // If vin already exists, navigate directly to vin-lookup
if(store.getters.vehicle.vin) { if(store.getters.vehicle.vin) {
this.$router.navigateAfterSave(this.navigationScenarios.CLICKED_FORWARD_WITH_VIN, this.$route); this.$router.navigateAfterSave(this.navigationScenarios.CLICKED_FORWARD_WITH_VIN, this.$route);
return; return;
} }
else { else {
this.$router.navigateAfterSave(this.navigationScenarios.CLICKED_FORWARD_WITHOUT_VIN, this.$route); this.$router.navigateAfterSave(this.navigationScenarios.CLICKED_FORWARD_WITHOUT_VIN, this.$route);

20
src/layouts/vehicle-damage/windshield-options/windshield-options.vue
View file

@ -14,7 +14,7 @@
alertClass="alert-danger" alertClass="alert-danger"
:isDismissible="false" :isDismissible="false"
/> />
<windshieldChipCountQuestion cmsWidgetName="WindshieldChipCountQuestion" <windshieldChipCountQuestion cmsWidgetName="WindshieldChipCountQuestion"
:isAvailable="isRepairOptionSelected && !hasRepairReplaceConflict" :isAvailable="isRepairOptionSelected && !hasRepairReplaceConflict"
groupName="WindshieldChipCountQuestion" groupName="WindshieldChipCountQuestion"
v-model="selectedWindshieldChipCountValues" v-model="selectedWindshieldChipCountValues"
@ -30,7 +30,7 @@
isRequired isRequired
/> />
<alert <alert
class="my-3" class="mt-5"
cmsWidgetName="SplitSingleConflict" cmsWidgetName="SplitSingleConflict"
v-if="hasSplitSingleConflict" v-if="hasSplitSingleConflict"
alertClass="alert-danger" 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("windshield-replace-options-required", required(errorMessages.WINSHIELD_REPLACE_OPTIONS_REQUIRED));
defineRule("check-for-repair-and-replace", (value, [otherFieldValue]) => { defineRule("check-for-repair-and-replace", (value, [otherFieldValue]) => {
if (value.toString().toUpperCase().includes(damageLocationsSelected.REPAIR.toUpperCase()) && if (value.toString().toUpperCase().includes(damageLocationsSelected.REPAIR.toUpperCase()) &&
otherFieldValue.toString().toUpperCase().includes(damageLocationsSelected.WINDSHIELD.toUpperCase()) && otherFieldValue.toString().toUpperCase().includes(damageLocationsSelected.WINDSHIELD.toUpperCase()) &&
Array.isArray(otherFieldValue) && Array.isArray(otherFieldValue) &&
otherFieldValue.length > 1) otherFieldValue.length > 1)
{ {
return false; return false;
} }
@ -72,8 +72,8 @@ defineRule("repair-only", (value) => {
return false; return false;
}); });
defineRule("prevent-split-and-single-together", (value) => { defineRule("prevent-split-and-single-together", (value) => {
if (value.toString().toUpperCase().includes(damageLocationsSelected.SINGLE.toUpperCase()) && if (value.toString().toUpperCase().includes(damageLocationsSelected.SINGLE.toUpperCase()) &&
(value.toString().toUpperCase().includes(damageLocationsSelected.DRIVER.toUpperCase()) || (value.toString().toUpperCase().includes(damageLocationsSelected.DRIVER.toUpperCase()) ||
value.toString().toUpperCase().includes(damageLocationsSelected.PASSENGER.toUpperCase()))) value.toString().toUpperCase().includes(damageLocationsSelected.PASSENGER.toUpperCase())))
{ {
return false; return false;
@ -145,7 +145,7 @@ export default ({
} }
}, },
isWindshieldDamageLocation() { isWindshieldDamageLocation() {
return this.selectedDamageLocations.some(selectedDamages => return this.selectedDamageLocations.some(selectedDamages =>
{ {
return Boolean(selectedDamages.toUpperCase() === "WINDSHIELD"); return Boolean(selectedDamages.toUpperCase() === "WINDSHIELD");
}); });
@ -193,4 +193,4 @@ export default ({
alert, alert,
}, },
}) })
</script> </script>

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

@ -71,7 +71,7 @@
:manualHeadline="PerfectMatchNewVinAlertReadOnlyHeader" :manualHeadline="PerfectMatchNewVinAlertReadOnlyHeader"
:manualCopy="PerfectMatchNewVinAlertReadOnlyBody" :manualCopy="PerfectMatchNewVinAlertReadOnlyBody"
v-model="customAlertData" v-model="customAlertData"
v-if="isVinFieldReadOnly" v-if="isVinFieldReadOnly"
alertClass="alert-success" alertClass="alert-success"
/> />
<alert <alert
@ -102,7 +102,7 @@
:manualHeadline="PerfectMatchNewVinAlertHeader" :manualHeadline="PerfectMatchNewVinAlertHeader"
:manualCopy="PerfectMatchNewVinAlertBody" :manualCopy="PerfectMatchNewVinAlertBody"
v-model="customAlertData" v-model="customAlertData"
v-if="perfectMatchNewVinAlert && !noServiceZip && !vinNotFound && meta.valid" v-if="perfectMatchNewVinAlert && !noServiceZip && !vinNotFound && meta.valid && !isVinFieldReadOnly"
alertClass="alert-success" alertClass="alert-success"
/> />
<funnelFooter <funnelFooter
@ -190,6 +190,7 @@ export default {
}, },
watch: { watch: {
vin() { vin() {
this.vinNotFound = false;
this.$refs.funnelFooter.updateButtonText( this.$refs.funnelFooter.updateButtonText(
this.getCmsContent("FunnelFooterWidget", "ForwardButtonText") this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
); );

16
src/mixins/analytics-mixin.js
View file

@ -9,12 +9,18 @@ import baseMixin from "@/mixins/base-mixin";
export default { export default {
methods: { methods: {
logPageView(pageEvent) { 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(); const currentPageName = getPageNameByQueryString();
var payload = { var payload = {
userId: getDeviceIdValue(), userId: getDeviceIdValue(),
sessionKey: getSessionKeyValue(), sessionKey: getSessionKeyValue(),
pageName: currentPageName, pageName: currentPageName,
sessionId: getSessionIdValue(), sessionId: sid,
action: '', action: '',
event: pageEvent, event: pageEvent,
shouldUseSessionId: true, shouldUseSessionId: true,
@ -24,12 +30,18 @@ export default {
}, },
logCustomEvent(category, action, label, value) { 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(); const currentPageName = getPageNameByQueryString();
var payload = { var payload = {
userId: getDeviceIdValue(), userId: getDeviceIdValue(),
sessionKey: getSessionKeyValue(), sessionKey: getSessionKeyValue(),
pageName: currentPageName, pageName: currentPageName,
sessionId: getSessionIdValue(), sessionId: sid,
category: category, category: category,
action: action, action: action,
label: label, label: label,

8
src/mixins/analytics-mixin.spec.js
View file

@ -1,5 +1,5 @@
import analyticsMixin from "@/mixins/analytics-mixin"; 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"; import { storeActions } from "@/constants/store-actions";
describe("analyticsMixin.js", () => { describe("analyticsMixin.js", () => {
@ -14,6 +14,12 @@ describe("analyticsMixin.js", () => {
} }
const mocks = setupMocksForJsFiles(mockData); const mocks = setupMocksForJsFiles(mockData);
const testCookieValue = {
sid: '10000000-0000-0000-0000-000000000001'
}
setupCookies({ funnelCookieValue: JSON.stringify(testCookieValue) });
analyticsMixin.methods.logPageView(type, payload); analyticsMixin.methods.logPageView(type, payload);
expect(mocks.baseMixin.methods.dispatchStoreAction).toBeCalled(); expect(mocks.baseMixin.methods.dispatchStoreAction).toBeCalled();

4
src/router/index.js
View file

@ -126,7 +126,7 @@ const router = createRouter({
router.afterEach(async (to, from) => { router.afterEach(async (to, from) => {
// Push page view to GA // Push page view to GA
analyticsMixin.methods.pushPageViewToGA(to.query[queryStrings.FMG_PAGE]); analyticsMixin.methods.pushPageViewToGA(to.query[queryStrings.FMG_PAGE]);
baseMixin.methods.dispatchStoreAction(storeActions.GET_EXPERIMENTS_BY_USER, { userId: getDeviceIdValue() }) baseMixin.methods.dispatchStoreAction(storeActions.GET_EXPERIMENTS_BY_USER, { userId: getDeviceIdValue() })
.then( (response) => { .then( (response) => {
analyticsMixin.methods.pushExperimentsToDataLayer(response.data); analyticsMixin.methods.pushExperimentsToDataLayer(response.data);
@ -271,4 +271,4 @@ function resetDependentState(component) {
return component.default.methods.resetDependentState(); return component.default.methods.resetDependentState();
} }
export default router; export default router;

4
src/styles/common-animations.scss
View file

@ -12,11 +12,11 @@
} }
.route-fade-enter-active .fade-on-route-transition { .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 { .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, .route-fade-enter-from .fade-on-route-transition,

22
src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
View file

@ -1,6 +1,7 @@
import { shallowMount } from "@vue/test-utils"; import { shallowMount } from "@vue/test-utils";
import listButtonHorizontal from "./list-button-horizontal"; import listButtonHorizontal from "./list-button-horizontal";
import { nextTick } from "vue"; import { nextTick } from "vue";
import { GaActions } from "@/constants/analytics";
describe("list-button-horizontal.vue", () => { describe("list-button-horizontal.vue", () => {
it("Should return input type checkbox if isMultiSelect is true", async () => { 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 () => { it("Should return loader enabled true", async () => {
// Act // Act
const wrapper = shallowMount(listButtonHorizontal, { const wrapper = shallowMount(listButtonHorizontal, {
global: {
mocks: {
'$route': { query: { fmgPage: 'page-name' } },
GaActions: GaActions,
pushEventToGA: jest.fn(),
}
},
propsData: { propsData: {
selectingInitiatesLoad: true, selectingInitiatesLoad: true,
}, },
@ -112,6 +120,13 @@ describe("list-button-horizontal.vue", () => {
it("Should return loader color", async () => { it("Should return loader color", async () => {
// Act // Act
const wrapper = shallowMount(listButtonHorizontal, { const wrapper = shallowMount(listButtonHorizontal, {
global: {
mocks: {
'$route': { query: { fmgPage: 'page-name' } },
GaActions: GaActions,
pushEventToGA: jest.fn(),
}
},
propsData: { propsData: {
loaderColor: "blue", loaderColor: "blue",
selectingInitiatesLoad: true, selectingInitiatesLoad: true,
@ -135,6 +150,13 @@ describe("list-button-horizontal.vue", () => {
it("Should return loader position", async () => { it("Should return loader position", async () => {
// Act // Act
const wrapper = shallowMount(listButtonHorizontal, { const wrapper = shallowMount(listButtonHorizontal, {
global: {
mocks: {
'$route': { query: { fmgPage: 'page-name' } },
GaActions: GaActions,
pushEventToGA: jest.fn(),
}
},
propsData: { propsData: {
loaderPosition: "right", loaderPosition: "right",
selectingInitiatesLoad: true, selectingInitiatesLoad: true,

6
src/ux-components/list-button-horizontal/list-button-horizontal.vue
View file

@ -54,6 +54,7 @@
<script> <script>
import { useField } from "vee-validate"; import { useField } from "vee-validate";
import loader from "@/ux-components/loader/loader"; import loader from "@/ux-components/loader/loader";
import { queryStrings } from "@/constants/query-strings";
export default { export default {
name: "listButtonHorizontal", name: "listButtonHorizontal",
@ -91,6 +92,10 @@ export default {
: this.selectedValues[0]; : this.selectedValues[0];
} }
}, },
unmounted() { // needed to clear this button's selectedValues if it is removed
this.checkValue = false;
this.handleCheckChange();
},
methods: { methods: {
displayLoader() { displayLoader() {
this.isLoaderDisplayed = true; this.isLoaderDisplayed = true;
@ -116,6 +121,7 @@ export default {
this.handleCheckChange(); this.handleCheckChange();
} }
this.handleChange(this.value); this.handleChange(this.value);
this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true);
}, },
handleCheckChange() { handleCheckChange() {
const emitEvent = { const emitEvent = {

22
src/ux-components/list-button/list-button.spec.js
View file

@ -1,6 +1,7 @@
import { shallowMount } from "@vue/test-utils"; import { shallowMount } from "@vue/test-utils";
import listButton from "./list-button"; import listButton from "./list-button";
import { nextTick } from "vue"; import { nextTick } from "vue";
import { GaActions } from "@/constants/analytics";
describe("list-button.vue", () => { describe("list-button.vue", () => {
it("Should return input type checkbox if isMultiSelect is true", async () => { 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 () => { it("Should return loader enabled true", async () => {
// Act // Act
const wrapper = shallowMount(listButton, { const wrapper = shallowMount(listButton, {
global: {
mocks: {
'$route': { query: { fmgPage: 'page-name' } },
GaActions: GaActions,
pushEventToGA: jest.fn(),
}
},
propsData: { propsData: {
selectingInitiatesLoad: true, selectingInitiatesLoad: true,
}, },
@ -109,6 +117,13 @@ describe("list-button.vue", () => {
it("Should return loader color", async () => { it("Should return loader color", async () => {
// Act // Act
const wrapper = shallowMount(listButton, { const wrapper = shallowMount(listButton, {
global: {
mocks: {
'$route': { query: { fmgPage: 'page-name' } },
GaActions: GaActions,
pushEventToGA: jest.fn(),
}
},
propsData: { propsData: {
loaderColor: "blue", loaderColor: "blue",
selectingInitiatesLoad: true, selectingInitiatesLoad: true,
@ -128,6 +143,13 @@ describe("list-button.vue", () => {
it("Should return loader position", async () => { it("Should return loader position", async () => {
// Act // Act
const wrapper = shallowMount(listButton, { const wrapper = shallowMount(listButton, {
global: {
mocks: {
'$route': { query: { fmgPage: 'page-name' } },
GaActions: GaActions,
pushEventToGA: jest.fn(),
}
},
propsData: { propsData: {
loaderPosition: "right", loaderPosition: "right",
selectingInitiatesLoad: true, selectingInitiatesLoad: true,

6
src/ux-components/list-button/list-button.vue
View file

@ -54,6 +54,7 @@
<script> <script>
import { useField } from "vee-validate"; import { useField } from "vee-validate";
import loader from "@/ux-components/loader/loader"; import loader from "@/ux-components/loader/loader";
import { queryStrings } from "@/constants/query-strings";
export default { export default {
name: "listButton", name: "listButton",
@ -91,6 +92,10 @@ export default {
: this.selectedValues[0]; : this.selectedValues[0];
} }
}, },
unmounted() { // needed to clear this button's selectedValues if it is removed
this.checkValue = false;
this.handleCheckChange();
},
methods: { methods: {
displayLoader() { displayLoader() {
this.isLoaderDisplayed = true; this.isLoaderDisplayed = true;
@ -116,6 +121,7 @@ export default {
this.handleCheckChange(); this.handleCheckChange();
} }
this.handleChange(this.value); this.handleChange(this.value);
this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true);
}, },
handleCheckChange() { handleCheckChange() {
const emitEvent = { const emitEvent = {

16
src/ux-components/list-card/list-card.spec.js
View file

@ -1,6 +1,7 @@
import { shallowMount } from "@vue/test-utils"; import { shallowMount } from "@vue/test-utils";
import listCard from "./list-card"; import listCard from "./list-card";
import { nextTick } from "vue"; import { nextTick } from "vue";
import { GaActions } from "@/constants/analytics";
describe("list-card.vue", () => { describe("list-card.vue", () => {
it("Should return input type checkbox if isMultiSelect is true", async () => { 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 () => { it("Should run handleChange if triggerButton is triggered", async () => {
// Act // Act
const wrapper = shallowMount(listCard, { const wrapper = shallowMount(listCard, {
global: {
mocks: {
'$route': { query: { fmgPage: 'page-name' } },
GaActions: GaActions,
pushEventToGA: jest.fn(),
}
},
propsData: { propsData: {
selectingInitiatesLoad: false, 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 () => { it("Should run handleCheckChange and displayLoader if triggerButton is triggered and seletingInitiatesLoad is true", async () => {
// Act // Act
const wrapper = shallowMount(listCard, { const wrapper = shallowMount(listCard, {
global: {
mocks: {
'$route': { query: { fmgPage: 'page-name' } },
GaActions: GaActions,
pushEventToGA: jest.fn(),
}
},
propsData: { propsData: {
selectingInitiatesLoad: true, selectingInitiatesLoad: true,
}, },

6
src/ux-components/list-card/list-card.vue
View file

@ -61,6 +61,7 @@
<script> <script>
import { useField } from "vee-validate"; import { useField } from "vee-validate";
import { queryStrings } from "@/constants/query-strings";
export default { export default {
name: "listCard", name: "listCard",
@ -98,6 +99,10 @@ export default {
: this.selectedValues[0]; : this.selectedValues[0];
} }
}, },
unmounted() { // needed to clear this button's selectedValues if it is removed
this.checkValue = false;
this.handleCheckChange();
},
computed: { computed: {
getLabelClasses() { getLabelClasses() {
if (this.isWide) { if (this.isWide) {
@ -133,6 +138,7 @@ export default {
this.handleCheckChange(); this.handleCheckChange();
} }
this.handleChange(this.value); this.handleChange(this.value);
this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true);
}, },
handleCheckChange() { handleCheckChange() {
const emitEvent = { const emitEvent = {