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

Merge branch 'develop' into bugfix/CSR-584

Browse source
This commit is contained in:
Adam Caouette 2022-05-18 11:32:50 -04:00
commit 5ea493b25a
24 changed files with 219 additions and 103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
jest.config.js
View file

@ -27,6 +27,7 @@ module.exports = {
"!src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue",
"!src/common-components/dropdown-question/dropdown-question.vue",
"!src/common-components/textbox-question/textbox-question.vue",
"!src/ux-components/alert\alert.vue",
"!src/helpers/validation-rules.js",
// END
], // ! means exclude from coverage.

1
src/assets/img/FMGTransitionAnimation.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 30 KiB

22
src/common-components/dropdown-question/dropdown-question.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="dropdown-question">
<div class="dropdown-question" :class="(errors && errors.length) || hasError ? 'has-error' : ''">
<label :for="inputId" :aria-label="questionText" class="form-label" v-html="labelText"></label>
<select v-model="selectedOption"
class="form-select"
@ -9,8 +9,7 @@
:disabled="isDisabled"
:aria-required="isRequired"
:validationRules="validationRules"
@input="handleChange"
@blur="handleBlur" >
>
<option v-for="(value, name, index) in options" :value="name" :key="index">
{{ value }}
</option>
@ -40,10 +39,23 @@ export default {
cmsWidgetName: String,
},
setup(props) {
const propsClone = Object.assign({}, props);
const modelValue = propsClone.modelValue;
let initialValue;
switch (typeof modelValue) {
case "number":
initialValue = modelValue;
break;
default:
initialValue = (modelValue && modelValue.length > 0) ? modelValue : "";
break;
}
const fieldOptions = {
type: "text",
type: "select",
value: props.modelValue,
initialValue: props.modelValue,
initialValue: initialValue,
};
const {

3
src/common-components/funnel-footer/funnel-footer.spec.js
View file

@ -62,6 +62,7 @@ describe("funnel-footer.vue", () => {
const mockMixin = {
methods: {
getCmsContent: jest.fn()
getCmsContent: jest.fn(),
getFooterInfoBoxHeight: jest.fn(()=>80)
}
}

2
src/common-components/funnel-footer/funnel-footer.vue
View file

@ -63,7 +63,7 @@ export default {
}
},
mounted() {
this.paddingHeight = document.querySelector(".footer #infoBox").offsetHeight + 24;
this.paddingHeight = this.getFooterInfoBoxHeight() + 24;
this.$nextTick(() => {
window.addEventListener('resize', this.onResize);
})

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

@ -1,16 +1,9 @@
<template>
<div v-show="isModalVisible" class="loading-modal-backdrop">
<div v-if="isModalVisible" class="loading-modal-backdrop">
<div class="loading-modal">
<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">
Please wait...
</div>
<div class="text-center fs-5 loading-modal-text">
This process can take up to 20 seconds.
<img alt="Loading" src="@/assets/img/FMGTransitionAnimation.svg">
</div>
</section>
</div>
@ -60,23 +53,15 @@
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
border-radius: 4px;
top: 48px;
height: 246px;
height: 186px;
width: 327px;
}
.loading-modal-body {
position: relative;
padding: 20px 10px;
}
.loading-modal-text {
padding: 0 24px 0 24px;
}
.modal-icon-container {
position: relative;
width: 75px;
height: 75px;
margin: 15px auto;
padding-bottom: 26px;
}
@ -85,6 +70,8 @@
position: absolute;
vertical-align: middle;
border: 0;
width: 327px;
height: 186px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

17
src/common-components/textbox-question/textbox-question.vue
View file

@ -2,8 +2,8 @@
<div class="textbox-question" :class="(errors && errors.length) || hasError ? 'has-error' : ''">
<label :for="inputId" :aria-label="questionText" class="form-label" v-html="labelText"></label>
<!-- See https://stackoverflow.com/a/30976223 for information about "do-not-autofill" -->
<input
v-model="value"
<input
v-model.trim="value"
v-maska="mask"
:type="type"
class="form-control"
@ -14,12 +14,12 @@
:aria-disabled="isDisabled"
:disabled="isDisabled"
:aria-required="isRequired"
autocomplete="do-not-autofill"
autocomplete="do-not-autofill"
:class="[hasIcon ? 'has-icon' : '', iconRight ? 'icon-right' : '']"
:validationRules="validationRules"
/>
<div v-show="errorMessage" class="row mt-2 form-test-error">
<span role="alert">{{ errorMessage }}</span>
<div v-show="errorMessage" class="row my-2 form-test-error">
<span class="d-inline-flex mt-0" role="alert">{{ errorMessage }}</span>
</div>
</div>
</template>
@ -60,7 +60,7 @@ export default {
let initialValue;
switch (typeof modelValue) {
case "number":
case "number":
initialValue = modelValue;
break;
default:
@ -71,7 +71,7 @@ export default {
const fieldOptions = {
type: "text",
value: modelValue,
initialValue: initialValue
initialValue: initialValue,
};
const {
@ -159,6 +159,7 @@ export default {
border: 1px solid $gray-500;
border-radius: .5rem;
min-height: 3rem;
padding: 12px 16px;
&::placeholder {
color: $gray-500;
}
@ -182,4 +183,4 @@ export default {
display: none;
}
}
</style>
</style>

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

@ -4,10 +4,17 @@ import { storeActions } from "@/constants/store-actions";
export function getDamageString() {
const damageLocations = store.getters.damage.glassToReplace;
const isRepair = store.getters.damage.isRepair;
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"
} else {

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

@ -12,28 +12,28 @@
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" />
<div class="fade-on-route-transition sub-container make-tall">
<customerQuestions ref="customerQuestions" v-model="customerQuestions" />
<alert ref="alertVinNotFound" v-show="displayVinNotFoundAlert"
class="my-3"
<alert ref="alertVinNotFound" v-if="displayVinNotFoundAlert"
class="mb-4"
cmsWidgetName="AlertVinNotFoundWidget"
alertClass="alert-danger"
v-bind:isDismissible="false"
/>
<alert ref="alertMatchedDifferentVehicle" v-show="displayMatchedDifferentVehicleAlert"
class="my-3"
<alert ref="alertMatchedDifferentVehicle" v-if="displayMatchedDifferentVehicleAlert"
class="mb-4"
:manualHeadline="AlertMatchedDifferentVehicleHeader"
:manualCopy="AlertMatchedDifferentVehicleBody"
alertClass="alert-warning"
v-bind:isDismissible="false"
/>
<alert ref="alertNonServiceableZip" v-show="displayNonServiceableZipAlert"
class="my-3"
<alert ref="alertNonServiceableZip" v-if="displayNonServiceableZipAlert"
class="mb-4"
alertClass="alert-danger"
:manualHeadline="AlertNonServiceableZipHeader"
:manualCopy="AlertNonServiceableZipBody"
v-bind:isDismissible="false"
/>
<alert ref="alertVinLookupsByHomeAddressNotAllowed" v-show="displayVinLookupByHomeAddressNotAllowedAlert"
class="my-3"
<alert ref="alertVinLookupsByHomeAddressNotAllowed" v-if="displayVinLookupByHomeAddressNotAllowedAlert"
class="mb-4"
cmsWidgetName="AlertVinLookupsByHomeAddressNotAllowedWidget"
alertClass="alert-danger"
v-bind:isDismissible="false"
@ -252,6 +252,15 @@ export default {
return;
}
// if multiple cars were found
let matchingCars = carsFound.filter(car => car.vehicle.carId === carEntered.carId);
if (matchingCars.length === 1) {
// and one and only one of them matches the carId entered, save the vehicle info
// so we can go to the Heritage Funnel directly
const matchingCar = matchingCars[0];
this.updateVehicleInfo(matchingCar.vin, matchingCar.vehicle);
}
// update data if the zip or service zip is servicable
this.updateCustomerInfo();
}
@ -285,13 +294,17 @@ export default {
navigateAfterSaveToHeritageFunnel(this.$route);
}
} else if (carsFound.length > 1) {
// if multiple cars were found
if (carsFound.find(car => car.vehicle.carId === carEntered.carId)) {
// and one of them matches the car id entered
// if multiple cars were found
let matchingCars = carsFound.filter(car => car.vehicle.carId === carEntered.carId);
if (matchingCars.length === 1) {
this.$refs.loadingModal.showModal();
// and one and only of them matches the car id entered
const matchingCar = matchingCars[0];
this.updateVehicleInfo(matchingCar.vin, matchingCar.vehicle);
navigateAfterSaveToHeritageFunnel(this.$route);
} else {
// and there is no match, navigate to "address-vehicles" page
// if there are no matches or there are multiple matches, navigate to "address-vehicles" page
this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_MULTIPLE_VEHICLES, this.$route, {}, {}, carsFound);
}
}
@ -334,8 +347,7 @@ export default {
store.commit(storeMutations.UPDATE_REGISTRATION_LAST_NAME, this.customerQuestions.lastName);
store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP_CODE, this.serviceZipCode);
store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, this.customerQuestions.emailAddress);
},
},
updateServiceLocationIfNecessary() {
const serviceLocation = store.getters.order.serviceLocation;
@ -360,13 +372,14 @@ export default {
return text;
},
AlertMatchedDifferentVehicleBody(){
let content = this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText");
content = content.replaceAll("{custom:glassText}", getDamageString());
const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
const vinYmmExpected = `${store.getters.vehicle.year} ${store.getters.vehicle.make} ${store.getters.vehicle.model}`;
content = content.replaceAll("{custom:vinYmmFound}", vinYmmFound);
content = content.replaceAll("{custom:vinYmmExpected}", vinYmmExpected);
const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
const vinYmmExpected = `${store.getters.vehicle.year} ${store.getters.vehicle.make} ${store.getters.vehicle.model}`;
const content = this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText")
.replaceAll("{custom:glassText}", getDamageString())
.replaceAll("{custom:vinYmmFound}", vinYmmFound)
.replaceAll("{custom:vinYmmExpected}", vinYmmExpected);
return content;
},

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

@ -1,7 +1,7 @@
<template>
<div class="row mt-2 mb-4">
<div class="col">
<textboxQuestion cmsWidgetName="StreetAddressQuestionWidget" v-model="addressModel.streetAddress" ref="autocomplete" inputId="autocomplete" placeholderText="Search" aria-haspopup="" hasIcon disableAutoFill validationRules="street-address-required" />
<textboxQuestion id="streetAddressField" cmsWidgetName="StreetAddressQuestionWidget" v-model="addressModel.streetAddress" ref="autocomplete" inputId="autocomplete" placeholderText="Search" aria-haspopup="" hasIcon disableAutoFill validationRules="street-address-required" />
</div>
</div>
<transition name="fade" mode="out-in">
@ -21,12 +21,14 @@
</div>
</div>
</transition>
<alert ref="alertVerificationWarning" v-show="displayVerificationWarning"
<alert ref="alertVerificationWarning" v-if="displayVerificationWarning"
class="mb-4"
cmsWidgetName="AlertVerificationWarningWidget"
alertClass="alert-warning"
v-bind:isDismissible="false"
/>
<alert ref="alertNoMatchWarning" v-show="displayNoMatchWarning"
<alert ref="alertNoMatchWarning" v-if="displayNoMatchWarning"
class="mb-4"
cmsWidgetName="AlertNoMatchWarningWidget"
alertClass="alert-warning"
v-bind:isDismissible="false"
@ -75,6 +77,8 @@ export default ({
alertCopyVerificationWarning: "",
alertHeadlineNoMatchWarning: "",
alertCopyNoMatchWarning: "",
autocomplete: {},
autocompleteListener: {}
}
},
computed: {
@ -163,7 +167,7 @@ export default ({
this.$loadScript(`https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`)
.then(() => {
// Script is loaded, initialize the autocomplete textbox
const autocomplete = new window.google.maps.places.Autocomplete(
self.autocomplete = new window.google.maps.places.Autocomplete(
addressField1,
{
componentRestrictions: { country: ["us"] },
@ -173,7 +177,7 @@ export default ({
);
// Standard place_changed event handling
autocomplete.addListener('place_changed', fillInAddress);
self.autocompleteListener = window.google.maps.event.addListener(this.autocomplete, 'place_changed', fillInAddress);
// Wrapping the addressField1 element in the Google Address Autocomplete object
// will cause "autocomplete='off'" which Chrome completely ignores. This event
@ -181,6 +185,11 @@ export default ({
// https://stackoverflow.com/a/30976223
addressField1.addEventListener("focus", () => {
addressField1.setAttribute("autocomplete", "do-not-autofill");
// Make place results box stick to the input on scroll
const streetAddressField = document.getElementById("streetAddressField");
const autocompleteResultsContainer = document.getElementsByClassName("pac-container")[0];
streetAddressField.appendChild(autocompleteResultsContainer);
})
addressField1.onchange = function() {
@ -214,13 +223,10 @@ export default ({
function fillInAddress(place) {
if (!place) {
place = autocomplete.getPlace();
place = self.autocomplete.getPlace();
}
if (place && place.address_components) {
self.addressModel.streetAddress= "";
self.showAddressFields = true;
for (const component of place.address_components) {
const componentType = component.types[0];
@ -251,11 +257,16 @@ export default ({
self.displayVerificationWarning = false;
self.displayNoMatchWarning = false;
self.showAddressFields = true;
}
else {
self.displayVerificationWarning = true;
self.displayNoMatchWarning = false;
}
}
}
})
.catch(() => {
@ -269,10 +280,30 @@ export default ({
},
watch: {
addressModel: {
handler(newValue){
this.displayNoMatchWarning = false;
handler(newValue) {
// The first time the address model changes is w
if (!newValue.city &&
!newValue.state &&
!newValue.zipCode) {
return;
}
if (this.displayNoMatchWarning === true) {
this.displayNoMatchWarning = false;
}
},
deep: true
},
showAddressFields: {
handler(newValue) {
// after showing the address fields, disable the address autocomplete
window.google.maps.event.removeListener(this.autocompleteListener);
window.google.maps.event.clearInstanceListeners(this.autocomplete);
const addressField1 = document.getElementById("autocomplete");
addressField1.onchange = null;
const pacContainer = document.querySelector(".pac-container");
pacContainer.remove();
}
}
},
components: {
@ -281,4 +312,15 @@ export default ({
alert,
}
})
</script>
</script>
<style lang="scss">
#streetAddressField {
position: relative;
.pac-container {
top: 76px !important; // Height of #streetAddressField
left: 0 !important;
}
}
</style>

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

@ -10,7 +10,7 @@
<textboxQuestion cmsWidgetName="LastNameQuestionWidget" v-model="customerModel.lastName" ref="lastName" inputId="0030e56a57e74a4ab92de7fb8e97fec5" disableAutoFill validationRules="last-name-required" />
</div>
</div>
<div class="row mb-4">
<div class="row mb-5">
<div class="col">
<textboxQuestion cmsWidgetName="EmailAddressQuestionWidget" v-model="customerModel.emailAddress" ref="emailAddress" inputId="00450a91b8964a768ce3992e6feb890f" disableAutoFill validationRules="email-address-required|email-address-format"/>
</div>

8
src/layouts/address-vehicles/address-vehicles.vue
View file

@ -10,7 +10,7 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<alert
<alert
ref="alertFoundMultipleVehicles"
class="my-5"
alertClass="alert-warning"
@ -20,13 +20,13 @@
/>
<addressVehiclesQuestion
ref="addressVehiclesQuestion"
cmsWidgetName="VehicleConfirmationQuestion"
cmsWidgetName="VehicleConfirmationQuestion"
:vehicles="VehiclesForQuestions"
validationRules="vehicle-required"
v-model="selectedVehicleVin"
:isCarIdDifferent="isCarIdDifferent"
/>
<div class="alert-provide-vin my-5" v-if="splitAlertProvideVinBodyForLink.length">
<div class="alert-provide-vin my-3" v-if="splitAlertProvideVinBodyForLink.length">
<span v-for="copy in splitAlertProvideVinBodyForLink" :key="copy">
<span v-if="copy.includes('routerLink:')" class="text-body">
<router-link :to="{query: {fmgPage: `${copy.split(':')[1].split(',')[0]}`}, name: 'root'}">{{ copy.split(':')[1].split(',')[1] }}</router-link>
@ -240,4 +240,4 @@ export default {
line-height: inherit;
}
}
</style>
</style>

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

@ -24,7 +24,7 @@
<alert class="my-3" :manualHeadline="NoServiceZipHeader" :manualCopy="NoServiceZipBody" v-if="!isRegistrationZipServicable && isVinValid && !isCarIdDifferent" alertClass="alert-danger" />
<div class="row my-2">
<div class="col">
<textboxQuestion v-if="!isRegistrationZipServicable" cmsWidgetName="ServiceZip" v-model="serviceZip" inputId="serviceZip" validationRules="zip-required|zip-format" />
<textboxQuestion v-if="!isRegistrationZipServicable" cmsWidgetName="ServiceZip" v-model="serviceZip" inputId="serviceZip" validationRules="zip-required" />
</div>
</div>
<alert class="my-3" cmsWidgetName="NoMatchAlertWidget" v-if="!isVinValid" />
@ -80,10 +80,6 @@ import {
} from "vee-validate";
// DEFINE VALIDATION RULES
defineRule(
"zip-format",
regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT)
);
defineRule(
"license-plate-required",
required(errorMessages.LICENSE_PLATE_REQUIRED)

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

@ -10,7 +10,7 @@
<alert
class="my-3"
cmsWidgetName="NoReplacementAvailableError"
v-show="showNoReplacementAvailableError"
v-if="showNoReplacementAvailableError"
alertClass="alert-danger"
:isDismissible="false"
/>
@ -32,7 +32,7 @@
<alert
class="my-3"
cmsWidgetName="SplitSingleConflict"
v-show="hasSplitSingleConflict"
v-if="hasSplitSingleConflict"
alertClass="alert-danger"
:isDismissible="false"
/>

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

@ -88,6 +88,10 @@ export default {
store.commit(storeMutations.UPDATE_STYLE, null);
store.commit(storeMutations.UPDATE_CAR_ID, null);
store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, null);
store.commit(storeMutations.UPDATE_VEHICLE_VIN, null);
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, null);
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, null);
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, null);
// Invokes
store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);

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

@ -88,6 +88,10 @@ export default {
store.commit(storeMutations.UPDATE_STYLE, null);
store.commit(storeMutations.UPDATE_CAR_ID, null);
store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, null);
store.commit(storeMutations.UPDATE_VEHICLE_VIN, null);
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, null);
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, null);
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, null);
// Invokes
store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);

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

@ -101,6 +101,7 @@ export default {
store.commit(storeMutations.UPDATE_IS_REPAIR, null);
store.commit(storeMutations.UPDATE_NUMBER_OF_CHIPS, null);
store.commit(storeMutations.UPDATE_GLASS_TO_REPLACE, []);
store.commit(storeMutations.UPDATE_VEHICLE_VIN, null);
},
},

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

@ -107,8 +107,11 @@ export default {
store.commit(storeMutations.UPDATE_STYLE, null);
store.commit(storeMutations.UPDATE_CAR_ID, null);
store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, null);
store.commit(storeMutations.UPDATE_VEHICLE_VIN, null);
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, null);
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, null);
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, null);
// Invokes
store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
store.dispatch(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES);

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

@ -14,7 +14,7 @@
/>
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<div class="fade-on-route-transition sub-container make-tall">
<div class="row my-2">
<div class="row mt-2">
<div class="col">
<textboxQuestion
cmsWidgetName="VinNumber"
@ -41,7 +41,7 @@
mask="#####"
isRequired
disableAutoFill
validationRules="zip-required|zip-format"
validationRules="zip-required"
/>
</div>
</div>
@ -58,14 +58,14 @@
</div>
</div>
<alert
class="my-3"
class="my-4"
v-model="customAlertData"
v-if="noMatchAlert"
alertClass="alert-warning"
cmsWidgetName="NoMatchAlertWidget"
/>
<alert
class="my-3"
class="my-4"
:manualHeadline="PerfectMatchNewVinAlertReadOnlyHeader"
:manualCopy="PerfectMatchNewVinAlertReadOnlyBody"
v-model="customAlertData"
@ -73,15 +73,15 @@
alertClass="alert-success"
/>
<alert
class="my-3"
class="my-4"
:manualHeadline="MatchedDifferentVehicleAlertHeader"
:manualCopy="MatchedDifferentVehicleAlertBody"
v-model="customAlertData"
v-if="isCarIdDifferent"
v-if="isCarIdDifferent && !vinNotFound && !perfectMatchNewVinAlert"
alertClass="alert-warning"
/>
<alert
class="my-3"
class="my-4"
:manualHeadline="NoServiceZipHeader"
:manualCopy="NoServiceZipBody"
v-model="customAlertData"
@ -89,18 +89,18 @@
alertClass="alert-danger"
/>
<alert
class="my-3"
class="my-4"
v-model="customAlertData"
v-if="vinNotFound"
alertClass="alert-danger"
cmsWidgetName="VinNotFound"
/>
<alert
class="my-3"
class="my-4"
:manualHeadline="PerfectMatchNewVinAlertHeader"
:manualCopy="PerfectMatchNewVinAlertBody"
v-model="customAlertData"
v-if="perfectMatchNewVinAlert && !noServiceZip && meta.valid"
v-if="perfectMatchNewVinAlert && !noServiceZip && !vinNotFound && meta.valid"
alertClass="alert-success"
/>
<funnelFooter
@ -144,10 +144,6 @@ defineRule(
"zip-required",
required(errorMessages.SERVICE_ZIP_REQUIRED)
);
defineRule(
"zip-format",
regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT)
);
defineRule(
"email-address-required",
required(errorMessages.EMAIL_ADDRESS_REQUIRED)

3
src/mixins/base-mixin.js
View file

@ -42,6 +42,9 @@ export default {
el && el.focus();
}
},
getFooterInfoBoxHeight() {
return document.querySelector(".footer #infoBox").offsetHeight;
}
},
computed: {
storeActions() {

4
src/store/index.js
View file

@ -190,6 +190,10 @@ export const mutations = {
state.order.vehicle.style = null;
state.order.vehicle.carId = null;
state.order.vehicle.category = null;
state.order.vehicle.vin = null;
state.order.vehicle.imageUrl = null;
state.order.vehicle.imageVifNumber = null;
state.order.vehicle.imageColor = null;
},
resetDamageState(state) {
state.order.damage.isRepair = null;

24
src/styles/common-error-styles.scss
View file

@ -1,8 +1,9 @@
html {
.has-error {
&.list-button,
&.list-card,
&.list-card,
&.list-card.list-button {
border: none;
color: $red;
input[type=checkbox]:focus + label,
input[type=radio]:focus + label {
@ -13,15 +14,16 @@ html {
}
&:hover {
box-shadow: 0px 0px 0px 4px $red-200;
border-radius: 10px;
border-radius: .5rem;
}
label {
border: 1px solid $red;
border: 1px solid $red;
border-radius: .5rem;
}
label:hover {
box-shadow: 0px 0px 0px 4px $red-200;
border-radius: 10px;
border: 1px solid $red;
border: 1px solid $red;
}
}
&.list-button-horizontal {
@ -51,12 +53,21 @@ html {
}
&.textbox-question,
&.dropdown-question {
input:hover {
box-shadow: 0px 0px 0px 4px $red-200;
border-radius: .5rem;
border: 1px solid $red;
}
input:focus {
box-shadow: 0 0 0 2.5px $red;
}
p {
color: $red;
}
input,
select {
border: 1px solid $red;
border: 1px solid transparent;
box-shadow: 0 0 0 1px $red;
&:focus {
border: 1px solid transparent;
}
@ -114,8 +125,6 @@ html {
color: $red;
font-size: .875rem;
font-weight: 500;
height: 1.5rem;
margin-top: .25rem !important;
}
.form-test-invalid {
@ -129,7 +138,6 @@ html {
&.btn.btn-primary:hover,
&.btn.btn-primary:focus,
&.btn.btn-primary:focus-visible {
color: $gray !important;
background: $gray-200;
box-shadow: none;
}

3
src/ux-components/alert/alert.spec.js
View file

@ -66,6 +66,7 @@ describe("alert.vue", () => {
const mockMixin = {
methods: {
getCmsContent: jest.fn()
getCmsContent: jest.fn(),
getFooterInfoBoxHeight: jest.fn(()=> 80),
}
}

33
src/ux-components/alert/alert.vue
View file

@ -52,6 +52,10 @@ export default {
cmsWidgetName: String,
manualHeadline: String,
manualCopy: String,
shouldScrollToOnMount: {
type: Boolean,
default: true
},
},
computed: {
alertHeadline(){
@ -85,8 +89,35 @@ export default {
// first split would return 'estimate,provide your VIN'
// second split would return 'provide your VIN'
return copy.split(':')[1].split(',')[1];
}
},
ensureAlertIsInViewPort() {
if (this.shouldScrollToOnMount && this.$el.style.display != 'none') {
var footerHeight = this.getFooterInfoBoxHeight();
if (!this.isAlertInViewport(footerHeight)) {
this.scrollContainerToAlert(footerHeight);
}
}
},
isAlertInViewport(footerHeight) {
const rect = this.$el.getBoundingClientRect();
return (
rect.top >= 0 &&
// remove footerHeight from window height to avoid items being hidden behind footer
rect.bottom <= (window.innerHeight - footerHeight || document.documentElement.clientHeight - footerHeight)
);
},
scrollContainerToAlert(footerHeight) {
// alert position on page + height of alert + footer height
var scrollToHeight = this.$el.scrollHeight + this.$el.offsetHeight + footerHeight;
// find the div wrapped by the form element - this is the scrollable container
// should be a more future-proof selector in case of CSS class changes
var pageContainerScrollable = document.querySelector('form > div');
pageContainerScrollable.scrollTo(0, scrollToHeight);
},
},
mounted() {
this.ensureAlertIsInViewPort();
}
};
</script>