Merge branch 'release/2025.05.08' into feature/bugfix/CASH-501
This commit is contained in:
AdamCaouetteSafelite
GitHub
commit
7183adbe41
37 changed files with 1082 additions and 1575 deletions
|
|
@ -35,7 +35,7 @@ module.exports = {
|
||||||
testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
|
testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
|
||||||
coverageThreshold: {
|
coverageThreshold: {
|
||||||
global: {
|
global: {
|
||||||
statements: 74,
|
statements: 72,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// Uncomment this to avoid the massive amount of warnings we are getting for onSubmit and onInvalidSubmit
|
// Uncomment this to avoid the massive amount of warnings we are getting for onSubmit and onInvalidSubmit
|
||||||
|
|
|
||||||
6
src/assets/img/icons/calendar-icon-black.svg
Normal file
6
src/assets/img/icons/calendar-icon-black.svg
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M2.65567 6.44287H13.35" stroke="#0A0A0A" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M10.4256 2V3.97449" stroke="#0A0A0A" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M5.57864 2V3.97449" stroke="#0A0A0A" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5427 2.94792H5.4625C3.70011 2.94792 2.60001 3.92933 2.60001 5.73323V11.1637C2.60001 12.9962 3.70011 14.0003 5.4625 14.0003H10.5375C12.3051 14.0003 13.4001 13.0137 13.4001 11.2091V5.73323C13.4052 3.92933 12.3103 2.94792 10.5427 2.94792Z" stroke="#0A0A0A" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 748 B |
6
src/assets/img/icons/calendar-icon-grey.svg
Normal file
6
src/assets/img/icons/calendar-icon-grey.svg
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M3.15567 6.44287H13.85" stroke="#4B4C4E" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M10.9256 2V3.97449" stroke="#4B4C4E" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M6.07864 2V3.97449" stroke="#4B4C4E" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.0427 2.94791H5.9625C4.20011 2.94791 3.10001 3.92931 3.10001 5.73321V11.1637C3.10001 12.9962 4.20011 14.0003 5.9625 14.0003H11.0375C12.8051 14.0003 13.9001 13.0137 13.9001 11.2091V5.73321C13.9052 3.92931 12.8103 2.94791 11.0427 2.94791Z" stroke="#4B4C4E" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 748 B |
4
src/assets/img/icons/info-circle.svg
Normal file
4
src/assets/img/icons/info-circle.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M3 12C3 16.9699 7.02908 21 12 21C16.9709 21 21 16.9699 21 12C21 7.02908 16.9709 3 12 3C7.02908 3 3 7.02908 3 12Z" stroke="#0070D1" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M12.0057 15.6932V11.3936M12 8.35426V8.29102" stroke="#0070D1" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 450 B |
6
src/assets/img/icons/payment-icon-green.svg
Normal file
6
src/assets/img/icons/payment-icon-green.svg
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M2 13.8143H13.5894" stroke="#00723E" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.20013 2.88802L3.08796 7.00022C2.09364 7.99456 2.17407 9.32289 3.17099 10.3198L5.86013 13.0096C6.85706 14.0065 8.18213 14.0896 9.18039 13.092L13.2919 8.98042C14.2901 7.98222 14.2065 6.6571 13.2095 5.66018L10.5197 2.97039C9.52286 1.97348 8.19773 1.89046 7.20013 2.88802Z" stroke="#00723E" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M3.6315 10.782L10.9809 3.4326" stroke="#00723E" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M7.51559 11.2542L8.72786 10.042" stroke="#00723E" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 800 B |
6
src/assets/img/icons/payment-icon-grey.svg
Normal file
6
src/assets/img/icons/payment-icon-grey.svg
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M2.5 13.8143H14.0894" stroke="#4B4C4E" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.70014 2.88802L3.58797 7.00022C2.59365 7.99456 2.67408 9.32289 3.671 10.3198L6.36014 13.0096C7.35707 14.0065 8.68214 14.0896 9.68041 13.092L13.7919 8.98042C14.7901 7.98222 14.7065 6.6571 13.7095 5.66018L11.0197 2.97039C10.0229 1.97348 8.69774 1.89046 7.70014 2.88802Z" stroke="#4B4C4E" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M4.13152 10.782L11.4809 3.43262" stroke="#4B4C4E" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M8.01558 11.2543L9.22785 10.042" stroke="#4B4C4E" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 802 B |
26
src/constants/progress-bar-mapper.js
Normal file
26
src/constants/progress-bar-mapper.js
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
const pagePercentageMapper = {
|
||||||
|
vehicle: 4,
|
||||||
|
"vehicle-damage": 16,
|
||||||
|
estimate: 28,
|
||||||
|
"service-zip": 32,
|
||||||
|
"vin-lookup": 32,
|
||||||
|
"license-plate-lookup": 32,
|
||||||
|
"address-lookup": 32,
|
||||||
|
"address-vehicles": 36,
|
||||||
|
"part-questions": 40,
|
||||||
|
"molding-questions": 40,
|
||||||
|
"vehicle-parts": 40,
|
||||||
|
"capability-questions": 40,
|
||||||
|
quote: 48,
|
||||||
|
"insurance-company": 52,
|
||||||
|
"service-location": 60,
|
||||||
|
schedule: 72,
|
||||||
|
"customer-details": 84,
|
||||||
|
"payment-method": 92,
|
||||||
|
payment: 96,
|
||||||
|
confirmation: 100,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getProgressBarPercentage = (page) => {
|
||||||
|
return pagePercentageMapper[page] || 0;
|
||||||
|
};
|
||||||
|
|
@ -1,5 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="date-picker text-center" :class="calendarViewDirection">
|
<div
|
||||||
|
class="date-picker text-center"
|
||||||
|
:class="`${calendarViewDirection} ${isPricingByDayClass} ${showPricingByDayClass}`">
|
||||||
<fieldset id="date-picker-fieldset" ref="datePickerFieldset">
|
<fieldset id="date-picker-fieldset" ref="datePickerFieldset">
|
||||||
<legend class="sr-only">Select a day and time</legend>
|
<legend class="sr-only">Select a day and time</legend>
|
||||||
<div
|
<div
|
||||||
|
|
@ -60,18 +62,24 @@
|
||||||
date.dateNum === 1 ? 'first-day-' + month.startDateDayIndex : '',
|
date.dateNum === 1 ? 'first-day-' + month.startDateDayIndex : '',
|
||||||
date.dayClasses,
|
date.dayClasses,
|
||||||
date.isSelectable ? 'selectable-day' : '',
|
date.isSelectable ? 'selectable-day' : '',
|
||||||
|
date.isPricingByDayUpchargeDay ? 'upch-day' : '',
|
||||||
]">
|
]">
|
||||||
<input
|
<input
|
||||||
:disabled="!date.isSelectable"
|
:disabled="!date.isSelectable"
|
||||||
type="radio"
|
type="radio"
|
||||||
name="day-of-month"
|
name="day-of-month"
|
||||||
v-model="selectedDate"
|
v-model="selectedDate"
|
||||||
@click="fireDateSelectedEvent"
|
@click="fireDateSelectedEvent($event, date)"
|
||||||
@keypress.enter="fireDateSelectedEvent"
|
@keypress.enter="fireDateSelectedEvent($event, date)"
|
||||||
:value="date.inputValue"
|
:value="date.inputValue"
|
||||||
:id="`${month.monthLabel}-${date.dateNum.toString()}`" />
|
:id="`${month.monthLabel}-${date.dateNum.toString()}`" />
|
||||||
<label :for="`${month.monthLabel}-${date.dateNum.toString()}`">
|
<label :for="`${month.monthLabel}-${date.dateNum.toString()}`">
|
||||||
<span>{{ date.dateNum.toString() }}</span>
|
<span>{{ date.dateNum.toString() }}</span>
|
||||||
|
<span
|
||||||
|
v-if="isPricingByDayExperiment && showPricingByDay && date.isSelectable"
|
||||||
|
class="price">
|
||||||
|
{{ date.priceString }}
|
||||||
|
</span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -99,8 +107,17 @@
|
||||||
// Supporting files
|
// Supporting files
|
||||||
import loader from "@/ux-components/loader/loader";
|
import loader from "@/ux-components/loader/loader";
|
||||||
import store from "@/store";
|
import store from "@/store";
|
||||||
import { TIMINGFUNC_MAP, BUFFER_OFFSET, MONTHS_OF_YEAR } from "./mixins/constants";
|
import {
|
||||||
import { selectableDaysOptions, requiredParameter, forceTwoDigitString } from "./mixins/helpers";
|
TIMINGFUNC_MAP,
|
||||||
|
BUFFER_OFFSET,
|
||||||
|
MONTHS_OF_YEAR,
|
||||||
|
DAYS_OF_WEEK,
|
||||||
|
} from "@/digital-components/date-picker/mixins/constants";
|
||||||
|
import {
|
||||||
|
selectableDaysOptions,
|
||||||
|
requiredParameter,
|
||||||
|
forceTwoDigitString,
|
||||||
|
} from "@/digital-components/date-picker/mixins/helpers";
|
||||||
import {
|
import {
|
||||||
convertDateToDateString,
|
convertDateToDateString,
|
||||||
convertDateStringToDate,
|
convertDateStringToDate,
|
||||||
|
|
@ -148,6 +165,10 @@ export default {
|
||||||
type: String,
|
type: String,
|
||||||
default: "",
|
default: "",
|
||||||
},
|
},
|
||||||
|
showPricingByDay: Boolean,
|
||||||
|
pricingByDayBasePrice: Number,
|
||||||
|
pricingByDayUpcharge: Number,
|
||||||
|
isPricingByDayExperiment: Boolean,
|
||||||
},
|
},
|
||||||
setup(props) {
|
setup(props) {
|
||||||
const uuid = uuidv4();
|
const uuid = uuidv4();
|
||||||
|
|
@ -199,6 +220,12 @@ export default {
|
||||||
if (this.selectableDatesSetting === "custom") return "future";
|
if (this.selectableDatesSetting === "custom") return "future";
|
||||||
return "past";
|
return "past";
|
||||||
},
|
},
|
||||||
|
isPricingByDayClass() {
|
||||||
|
return this.isPricingByDayExperiment ? "pricing-by-day" : "";
|
||||||
|
},
|
||||||
|
showPricingByDayClass() {
|
||||||
|
return this.showPricingByDay ? "show-pricing-by-day" : "";
|
||||||
|
},
|
||||||
selectedDate: {
|
selectedDate: {
|
||||||
get() {
|
get() {
|
||||||
return this.modelValue;
|
return this.modelValue;
|
||||||
|
|
@ -212,12 +239,12 @@ export default {
|
||||||
initializeComponent(initialData) {
|
initializeComponent(initialData) {
|
||||||
this.setCalendarData(initialData);
|
this.setCalendarData(initialData);
|
||||||
},
|
},
|
||||||
fireDateSelectedEvent(event) {
|
fireDateSelectedEvent(event, date) {
|
||||||
// Ignore if arrow key selected radioButton
|
// Ignore if arrow key selected radioButton
|
||||||
if (event.screenX === 0 && event.screenY === 0) {
|
if (event.screenX === 0 && event.screenY === 0) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this.$emit("date-clicked");
|
this.$emit("date-clicked", date);
|
||||||
},
|
},
|
||||||
getWeekStartDate(dateString) {
|
getWeekStartDate(dateString) {
|
||||||
const date = convertDateStringToDate(dateString);
|
const date = convertDateStringToDate(dateString);
|
||||||
|
|
@ -440,6 +467,8 @@ export default {
|
||||||
initialViewEndDate: config.initialViewEndDate,
|
initialViewEndDate: config.initialViewEndDate,
|
||||||
hideSecondMonth: hideSecondMonth,
|
hideSecondMonth: hideSecondMonth,
|
||||||
preSelectedDate: config.preSelectedDate,
|
preSelectedDate: config.preSelectedDate,
|
||||||
|
pricingByDayBasePrice: config.pricingByDayBasePrice,
|
||||||
|
pricingByDayUpcharge: config.pricingByDayUpcharge,
|
||||||
};
|
};
|
||||||
if (direction === "future") {
|
if (direction === "future") {
|
||||||
// first 0, then 1
|
// first 0, then 1
|
||||||
|
|
@ -573,6 +602,17 @@ export default {
|
||||||
("0" + monthNum).slice(-2) +
|
("0" + monthNum).slice(-2) +
|
||||||
"-" +
|
"-" +
|
||||||
("0" + i).slice(-2);
|
("0" + i).slice(-2);
|
||||||
|
const dayIndex = convertDateStringToDate(dateString).getDay();
|
||||||
|
const dayObject = DAYS_OF_WEEK[dayIndex];
|
||||||
|
const isSelectable =
|
||||||
|
this.selectableDatesData.findIndex((date) => date.date === dateString) > -1
|
||||||
|
? true
|
||||||
|
: false;
|
||||||
|
const isPricingByDayUpchargeDay = dayObject.isPricingByDayUpchargeDay;
|
||||||
|
const displayPrice = isPricingByDayUpchargeDay
|
||||||
|
? options.pricingByDayBasePrice + options.pricingByDayUpcharge
|
||||||
|
: options.pricingByDayBasePrice;
|
||||||
|
const priceString = "$" + displayPrice;
|
||||||
|
|
||||||
if (offset === 0 && i === this.todayDateNum) {
|
if (offset === 0 && i === this.todayDateNum) {
|
||||||
dayClasses += " current-day";
|
dayClasses += " current-day";
|
||||||
|
|
@ -583,8 +623,8 @@ export default {
|
||||||
if (offset === 0 && i > this.todayDateNum && calendarViewDirection === "past") {
|
if (offset === 0 && i > this.todayDateNum && calendarViewDirection === "past") {
|
||||||
dayClasses += " unavailable-day";
|
dayClasses += " unavailable-day";
|
||||||
}
|
}
|
||||||
if (convertDateStringToDate(dateString).getDay() === 0) {
|
if (dayIndex === 0) {
|
||||||
dayClasses += " sunday";
|
dayClasses += " " + dayObject.cssClass;
|
||||||
}
|
}
|
||||||
if (
|
if (
|
||||||
this.hideSomeDaysForInitialView &&
|
this.hideSomeDaysForInitialView &&
|
||||||
|
|
@ -598,10 +638,9 @@ export default {
|
||||||
dateNum: i,
|
dateNum: i,
|
||||||
dayClasses: dayClasses,
|
dayClasses: dayClasses,
|
||||||
inputValue: dateString,
|
inputValue: dateString,
|
||||||
isSelectable:
|
priceString: priceString,
|
||||||
this.selectableDatesData.findIndex((date) => date.date === dateString) > -1
|
isSelectable: isSelectable,
|
||||||
? true
|
isPricingByDayUpchargeDay: isPricingByDayUpchargeDay,
|
||||||
: false,
|
|
||||||
};
|
};
|
||||||
dates.push(dateObject);
|
dates.push(dateObject);
|
||||||
}
|
}
|
||||||
|
|
@ -897,7 +936,6 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:checked {
|
&:checked {
|
||||||
@include media-breakpoint-up(sm) {
|
@include media-breakpoint-up(sm) {
|
||||||
box-shadow: 0 0 0 4px transparent;
|
box-shadow: 0 0 0 4px transparent;
|
||||||
|
|
@ -924,9 +962,7 @@ export default {
|
||||||
|
|
||||||
&.selectable-day {
|
&.selectable-day {
|
||||||
label {
|
label {
|
||||||
color: $blue;
|
|
||||||
background-color: $blue-100;
|
background-color: $blue-100;
|
||||||
border: 1px solid $blue;
|
|
||||||
min-width: 2.5rem;
|
min-width: 2.5rem;
|
||||||
width: 2.5rem;
|
width: 2.5rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
|
|
@ -934,12 +970,11 @@ export default {
|
||||||
}
|
}
|
||||||
&.unavailable-day {
|
&.unavailable-day {
|
||||||
label {
|
label {
|
||||||
color: $gray-500;
|
|
||||||
background-color: $gray-100;
|
|
||||||
border: none;
|
border: none;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
//NEEDED?
|
||||||
&.unavailable-day:not(&.sunday) {
|
&.unavailable-day:not(&.sunday) {
|
||||||
label {
|
label {
|
||||||
&::before {
|
&::before {
|
||||||
|
|
@ -949,7 +984,6 @@ export default {
|
||||||
left: -1rem;
|
left: -1rem;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 2.5rem;
|
height: 2.5rem;
|
||||||
background: $gray-100;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1056,7 +1090,107 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// pricing by day override styles
|
||||||
|
&.pricing-by-day {
|
||||||
|
.calendar-grid-container .grid-item {
|
||||||
|
margin: 0 0 0.15rem 0;
|
||||||
|
}
|
||||||
|
.month-year {
|
||||||
|
grid-area: 1 / 1 / 2 / 8;
|
||||||
|
}
|
||||||
|
.legend {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.radio-wrapper {
|
||||||
|
align-items: flex-start;
|
||||||
|
width: 100%;
|
||||||
|
height: 2.5rem;
|
||||||
|
color: $black;
|
||||||
|
|
||||||
|
input[type="radio"] {
|
||||||
|
&:focus-visible + label {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus + label,
|
||||||
|
&:checked:focus + label {
|
||||||
|
box-shadow: none;
|
||||||
|
background-color: $white;
|
||||||
|
color: $black;
|
||||||
|
}
|
||||||
|
&:checked + label {
|
||||||
|
background: $blue-100;
|
||||||
|
border: 2px solid $blue;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
color: $black;
|
||||||
|
span {
|
||||||
|
font-family: AvertaSemibold;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
label {
|
||||||
|
flex-direction: column;
|
||||||
|
height: 2.5rem;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0.25rem;
|
||||||
|
}
|
||||||
|
&.selectable-day {
|
||||||
|
label {
|
||||||
|
color: $black;
|
||||||
|
background-color: $blue-100;
|
||||||
|
min-width: 2.5rem;
|
||||||
|
width: 2.5rem;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.current-day {
|
||||||
|
label:after {
|
||||||
|
margin-top: 0.2rem;
|
||||||
|
position: relative;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.show-pricing-by-day {
|
||||||
|
.radio-wrapper {
|
||||||
|
&.selectable-day label span {
|
||||||
|
text-decoration: none;
|
||||||
|
color: $black;
|
||||||
|
font-weight: 400;
|
||||||
|
font-family: "AvertaSemibold";
|
||||||
|
|
||||||
|
&.price {
|
||||||
|
font-family: "AvertaRegular";
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.upch-day label span.price {
|
||||||
|
color: $gray-600;
|
||||||
|
font-weight: 400;
|
||||||
|
font-family: $font-family-sans-serif;
|
||||||
|
}
|
||||||
|
input[type="radio"] {
|
||||||
|
&:focus + label,
|
||||||
|
&:checked:focus + label {
|
||||||
|
color: $gray-600;
|
||||||
|
}
|
||||||
|
&:checked + label {
|
||||||
|
color: $blue;
|
||||||
|
span {
|
||||||
|
font-weight: 400;
|
||||||
|
font-family: "AvertaSemibold";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-link {
|
.btn-link {
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,66 @@
|
||||||
|
/*
|
||||||
|
The code below is generated from salesforce but modified in the following ways:
|
||||||
|
* Only the javascript inside the second <script> tag in the provided salesforce code is copy pasted
|
||||||
|
* CSS is not copied in
|
||||||
|
* First <script> tag loading in the file from the CDN is not copied in
|
||||||
|
* The only custom code added here is `let embedded_svc = window.embedded_svc` in the first line of the `initESW` function
|
||||||
|
and the wrapper exported function `initializeSalesforceWebChatForDev`
|
||||||
|
*/
|
||||||
|
|
||||||
|
export function initializeSalesforceWebchatForDev() {
|
||||||
|
var initESW = function (gslbBaseURL) {
|
||||||
|
let embedded_svc = window.embedded_svc;
|
||||||
|
embedded_svc.settings.displayHelpButton = true; //Or false
|
||||||
|
embedded_svc.settings.language = ""; //For example, enter 'en' or 'en-US'
|
||||||
|
|
||||||
|
//embedded_svc.settings.defaultMinimizedText = '...'; //(Defaults to Chat with an Expert)
|
||||||
|
//embedded_svc.settings.disabledMinimizedText = '...'; //(Defaults to Agent Offline)
|
||||||
|
|
||||||
|
//embedded_svc.settings.loadingText = ''; //(Defaults to Loading)
|
||||||
|
//embedded_svc.settings.storageDomain = 'yourdomain.com'; //(Sets the domain for your deployment so that visitors can navigate subdomains during a chat session)
|
||||||
|
|
||||||
|
// Settings for Chat
|
||||||
|
//embedded_svc.settings.directToButtonRouting = function(prechatFormData) {
|
||||||
|
// Dynamically changes the button ID based on what the visitor enters in the pre-chat form.
|
||||||
|
// Returns a valid button ID.
|
||||||
|
//};
|
||||||
|
//embedded_svc.settings.prepopulatedPrechatFields = {}; //Sets the auto-population of pre-chat form fields
|
||||||
|
//embedded_svc.settings.fallbackRouting = []; //An array of button IDs, user IDs, or userId_buttonId
|
||||||
|
//embedded_svc.settings.offlineSupportMinimizedText = '...'; //(Defaults to Contact Us)
|
||||||
|
|
||||||
|
embedded_svc.settings.enabledFeatures = ["LiveAgent"];
|
||||||
|
embedded_svc.settings.entryFeature = "LiveAgent";
|
||||||
|
|
||||||
|
embedded_svc.init(
|
||||||
|
"https://safelite2--dev.sandbox.my.salesforce.com",
|
||||||
|
"https://safelite2--dev.sandbox.my.salesforce-sites.com/chat",
|
||||||
|
gslbBaseURL,
|
||||||
|
"00D6s0000008r6A",
|
||||||
|
"Sales_Central_Snap_in",
|
||||||
|
{
|
||||||
|
baseLiveAgentContentURL:
|
||||||
|
"https://c.la12s-core1.sfdc-8tgtt5.salesforceliveagent.com/content",
|
||||||
|
deploymentId: "572Wr0000017xKX",
|
||||||
|
buttonId: "573Wr000000CpgH",
|
||||||
|
baseLiveAgentURL: "https://d.la12s-core1.sfdc-8tgtt5.salesforceliveagent.com/chat",
|
||||||
|
eswLiveAgentDevName:
|
||||||
|
"EmbeddedServiceLiveAgent_Parent04IWr000003yKq9MAE_1961681659a",
|
||||||
|
isOfflineSupportEnabled: false,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!window.embedded_svc) {
|
||||||
|
var s = document.createElement("script");
|
||||||
|
s.setAttribute(
|
||||||
|
"src",
|
||||||
|
"https://safelite2--dev.sandbox.my.salesforce.com/embeddedservice/5.0/esw.min.js"
|
||||||
|
);
|
||||||
|
s.onload = function () {
|
||||||
|
initESW(null);
|
||||||
|
};
|
||||||
|
document.body.appendChild(s);
|
||||||
|
} else {
|
||||||
|
initESW("https://service.force.com");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,63 @@
|
||||||
|
/*
|
||||||
|
The code below is generated from salesforce but modified in the following ways:
|
||||||
|
* Only the javascript inside the second <script> tag in the provided salesforce code is copy pasted
|
||||||
|
* CSS is not copied in
|
||||||
|
* First <script> tag loading in the file from the CDN is not copied in
|
||||||
|
* The only custom code added here is `let embedded_svc = window.embedded_svc` in the first line of the `initESW` function
|
||||||
|
and the wrapper exported function `initializeSalesforceWebChatForProd`
|
||||||
|
*/
|
||||||
|
|
||||||
|
export function initializeSalesforceWebchatForProd(embedded_svc) {
|
||||||
|
var initESW = function (gslbBaseURL) {
|
||||||
|
let embedded_svc = window.embedded_svc;
|
||||||
|
embedded_svc.settings.displayHelpButton = true; //Or false
|
||||||
|
embedded_svc.settings.language = ""; //For example, enter 'en' or 'en-US'
|
||||||
|
|
||||||
|
//embedded_svc.settings.defaultMinimizedText = '...'; //(Defaults to Chat with an Expert)
|
||||||
|
//embedded_svc.settings.disabledMinimizedText = '...'; //(Defaults to Agent Offline)
|
||||||
|
|
||||||
|
//embedded_svc.settings.loadingText = ''; //(Defaults to Loading)
|
||||||
|
//embedded_svc.settings.storageDomain = 'yourdomain.com'; //(Sets the domain for your deployment so that visitors can navigate subdomains during a chat session)
|
||||||
|
|
||||||
|
// Settings for Chat
|
||||||
|
//embedded_svc.settings.directToButtonRouting = function(prechatFormData) {
|
||||||
|
// Dynamically changes the button ID based on what the visitor enters in the pre-chat form.
|
||||||
|
// Returns a valid button ID.
|
||||||
|
//};
|
||||||
|
//embedded_svc.settings.prepopulatedPrechatFields = {}; //Sets the auto-population of pre-chat form fields
|
||||||
|
//embedded_svc.settings.fallbackRouting = []; //An array of button IDs, user IDs, or userId_buttonId
|
||||||
|
//embedded_svc.settings.offlineSupportMinimizedText = '...'; //(Defaults to Contact Us)
|
||||||
|
|
||||||
|
embedded_svc.settings.enabledFeatures = ["LiveAgent"];
|
||||||
|
embedded_svc.settings.entryFeature = "LiveAgent";
|
||||||
|
|
||||||
|
embedded_svc.init(
|
||||||
|
"https://safelite2.my.salesforce.com",
|
||||||
|
"https://safelite2.my.salesforce-sites.com/chat",
|
||||||
|
gslbBaseURL,
|
||||||
|
"00D3t000004nvsT",
|
||||||
|
"Sales_Central_Snap_in",
|
||||||
|
{
|
||||||
|
baseLiveAgentContentURL:
|
||||||
|
"https://c.la13-core2.sfdc-lywfpd.salesforceliveagent.com/content",
|
||||||
|
deploymentId: "5723t0000008wWB",
|
||||||
|
buttonId: "5733t000000D90z",
|
||||||
|
baseLiveAgentURL: "https://d.la13-core2.sfdc-lywfpd.salesforceliveagent.com/chat",
|
||||||
|
eswLiveAgentDevName:
|
||||||
|
"EmbeddedServiceLiveAgent_Parent04I3t000000Cq0SEAS_188de1871ea",
|
||||||
|
isOfflineSupportEnabled: false,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!window.embedded_svc) {
|
||||||
|
var s = document.createElement("script");
|
||||||
|
s.setAttribute("src", "https://safelite2.my.salesforce.com/embeddedservice/5.0/esw.min.js");
|
||||||
|
s.onload = function () {
|
||||||
|
initESW(null);
|
||||||
|
};
|
||||||
|
document.body.appendChild(s);
|
||||||
|
} else {
|
||||||
|
initESW("https://service.force.com");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,67 @@
|
||||||
|
/*
|
||||||
|
The code below is generated from salesforce but modified in the following ways:
|
||||||
|
* Only the javascript inside the second <script> tag in the provided salesforce code is copy pasted
|
||||||
|
* CSS is not copied in
|
||||||
|
* First <script> tag loading in the file from the CDN is not copied in
|
||||||
|
* The only custom code added here is `let embedded_svc = window.embedded_svc` in the first line of the `initESW` function
|
||||||
|
and the wrapper exported function `initializeSalesforceWebChatForQa`
|
||||||
|
*/
|
||||||
|
|
||||||
|
export function initializeSalesforceWebchatForQa() {
|
||||||
|
var initESW = function (gslbBaseURL) {
|
||||||
|
let embedded_svc = window.embedded_svc;
|
||||||
|
|
||||||
|
embedded_svc.settings.displayHelpButton = true; //Or false
|
||||||
|
embedded_svc.settings.language = ""; //For example, enter 'en' or 'en-US'
|
||||||
|
|
||||||
|
//embedded_svc.settings.defaultMinimizedText = '...'; //(Defaults to Chat with an Expert)
|
||||||
|
//embedded_svc.settings.disabledMinimizedText = '...'; //(Defaults to Agent Offline)
|
||||||
|
|
||||||
|
//embedded_svc.settings.loadingText = ''; //(Defaults to Loading)
|
||||||
|
//embedded_svc.settings.storageDomain = 'yourdomain.com'; //(Sets the domain for your deployment so that visitors can navigate subdomains during a chat session)
|
||||||
|
|
||||||
|
// Settings for Chat
|
||||||
|
//embedded_svc.settings.directToButtonRouting = function(prechatFormData) {
|
||||||
|
// Dynamically changes the button ID based on what the visitor enters in the pre-chat form.
|
||||||
|
// Returns a valid button ID.
|
||||||
|
//};
|
||||||
|
//embedded_svc.settings.prepopulatedPrechatFields = {}; //Sets the auto-population of pre-chat form fields
|
||||||
|
//embedded_svc.settings.fallbackRouting = []; //An array of button IDs, user IDs, or userId_buttonId
|
||||||
|
//embedded_svc.settings.offlineSupportMinimizedText = '...'; //(Defaults to Contact Us)
|
||||||
|
|
||||||
|
embedded_svc.settings.enabledFeatures = ["LiveAgent"];
|
||||||
|
embedded_svc.settings.entryFeature = "LiveAgent";
|
||||||
|
|
||||||
|
embedded_svc.init(
|
||||||
|
"https://safelite2--safeliteua.sandbox.my.salesforce.com",
|
||||||
|
"https://safelite2--safeliteua.sandbox.my.salesforce-sites.com/chat",
|
||||||
|
gslbBaseURL,
|
||||||
|
"00DDJ000000HRqO",
|
||||||
|
"Sales_Central_Snap_in",
|
||||||
|
{
|
||||||
|
baseLiveAgentContentURL:
|
||||||
|
"https://c.la12s-core1.sfdc-8tgtt5.salesforceliveagent.com/content",
|
||||||
|
deploymentId: "572DJ00000001j3",
|
||||||
|
buttonId: "573DJ00000001ur",
|
||||||
|
baseLiveAgentURL: "https://d.la12s-core1.sfdc-8tgtt5.salesforceliveagent.com/chat",
|
||||||
|
eswLiveAgentDevName:
|
||||||
|
"EmbeddedServiceLiveAgent_Parent04IDJ0000008OZk2AM_1883057c9a6",
|
||||||
|
isOfflineSupportEnabled: false,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!window.embedded_svc) {
|
||||||
|
var s = document.createElement("script");
|
||||||
|
s.setAttribute(
|
||||||
|
"src",
|
||||||
|
"https://safelite2--safeliteua.sandbox.my.salesforce.com/embeddedservice/5.0/esw.min.js"
|
||||||
|
);
|
||||||
|
s.onload = function () {
|
||||||
|
initESW(null);
|
||||||
|
};
|
||||||
|
document.body.appendChild(s);
|
||||||
|
} else {
|
||||||
|
initESW("https://service.force.com");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
import * as salesforceWebchatHelperdev from "./salesforce-helper-dev";
|
||||||
|
import * as salesforceWebchatHelperqa from "./salesforce-helper-qa";
|
||||||
|
import * as salesforceWebchatHelperprod from "./salesforce-helper-prod";
|
||||||
|
|
||||||
|
const mockEmbeddedSvc = {
|
||||||
|
settings: {},
|
||||||
|
init: jest.fn(),
|
||||||
|
testFlag: true,
|
||||||
|
};
|
||||||
|
|
||||||
|
describe("Salesforce Webchat Helper Tests", () => {
|
||||||
|
describe("Files and exposed methods exist", () => {
|
||||||
|
it("exposes initialization methods", () => {
|
||||||
|
expect(typeof salesforceWebchatHelperdev.initializeSalesforceWebchatForDev).toBe(
|
||||||
|
"function"
|
||||||
|
);
|
||||||
|
expect(typeof salesforceWebchatHelperqa.initializeSalesforceWebchatForQa).toBe(
|
||||||
|
"function"
|
||||||
|
);
|
||||||
|
expect(typeof salesforceWebchatHelperprod.initializeSalesforceWebchatForProd).toBe(
|
||||||
|
"function"
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}),
|
||||||
|
describe("Custom code added correctly", () => {
|
||||||
|
it("defines a local variable 'embedded_svc' in the initESW method", () => {
|
||||||
|
mockEmbeddedSvc.testFlag = "dev";
|
||||||
|
window.embedded_svc = mockEmbeddedSvc;
|
||||||
|
salesforceWebchatHelperdev.initializeSalesforceWebchatForDev();
|
||||||
|
expect(embedded_svc.testFlag).toBe("dev");
|
||||||
|
|
||||||
|
mockEmbeddedSvc.testFlag = "qa";
|
||||||
|
window.embedded_svc = mockEmbeddedSvc;
|
||||||
|
salesforceWebchatHelperqa.initializeSalesforceWebchatForQa();
|
||||||
|
expect(embedded_svc.testFlag).toBe("qa");
|
||||||
|
|
||||||
|
mockEmbeddedSvc.testFlag = "prod";
|
||||||
|
window.embedded_svc = mockEmbeddedSvc;
|
||||||
|
salesforceWebchatHelperprod.initializeSalesforceWebchatForProd();
|
||||||
|
expect(embedded_svc.testFlag).toBe("prod");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
import { shallowMount } from "@vue/test-utils";
|
||||||
|
import salesforceWebchat from "./salesforce-webchat.vue";
|
||||||
|
import * as devHelper from "./salesforce-helper-dev";
|
||||||
|
import * as qaHelper from "./salesforce-helper-qa";
|
||||||
|
import * as prodHelper from "./salesforce-helper-prod";
|
||||||
|
|
||||||
|
describe("salesforceWebchat.vue", () => {
|
||||||
|
it("renders correctly", () => {
|
||||||
|
const wrapper = shallowMount(salesforceWebchat);
|
||||||
|
expect(wrapper.exists()).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("has the correct default data", () => {
|
||||||
|
const wrapper = shallowMount(salesforceWebchat);
|
||||||
|
expect(wrapper.vm.$data).toEqual({});
|
||||||
|
});
|
||||||
|
|
||||||
|
it("has the correct default props", () => {
|
||||||
|
const wrapper = shallowMount(salesforceWebchat);
|
||||||
|
expect(wrapper.props().hideSalesforceWebchatLaunchButton).toBe(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("calls the correct initialization function based on environment", () => {
|
||||||
|
process.env.VUE_APP_CURRENT_ENVIRONMENT = "Prod";
|
||||||
|
let wrapper = shallowMount(salesforceWebchat);
|
||||||
|
mockProd = jest.spyOn(prodHelper, "initializeSalesforceWebchatForProd");
|
||||||
|
wrapper.vm.initializeSalesforceWebchat();
|
||||||
|
expect(mockProd).toHaveBeenCalled();
|
||||||
|
|
||||||
|
process.env.VUE_APP_CURRENT_ENVIRONMENT = "QA";
|
||||||
|
wrapper = shallowMount(salesforceWebchat);
|
||||||
|
mockQa = jest.spyOn(qaHelper, "initializeSalesforceWebchatForQa");
|
||||||
|
wrapper.vm.initializeSalesforceWebchat();
|
||||||
|
expect(mockQa).toHaveBeenCalled();
|
||||||
|
|
||||||
|
process.env.VUE_APP_CURRENT_ENVIRONMENT = "Dev";
|
||||||
|
wrapper = shallowMount(salesforceWebchat);
|
||||||
|
mockDev = jest.spyOn(devHelper, "initializeSalesforceWebchatForDev");
|
||||||
|
wrapper.vm.initializeSalesforceWebchat();
|
||||||
|
expect(mockDev).toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,59 @@
|
||||||
|
<template>
|
||||||
|
<span class="salesforce-webchat"></span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Supporting files
|
||||||
|
import { initializeSalesforceWebchatForDev } from "./salesforce-helper-dev";
|
||||||
|
import { initializeSalesforceWebchatForQa } from "./salesforce-helper-qa";
|
||||||
|
import { initializeSalesforceWebchatForProd } from "./salesforce-helper-prod";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "salesforceWebchat",
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
hideSalesforceWebchatLaunchButton: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// Load in script from salesforce CDN
|
||||||
|
const script = document.createElement("script");
|
||||||
|
script.src = "https://service.force.com/embeddedservice/5.0/esw.min.js";
|
||||||
|
script.onload = this.initializeSalesforceWebchat;
|
||||||
|
document.body.appendChild(script);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initializeSalesforceWebchat() {
|
||||||
|
switch (process.env.VUE_APP_CURRENT_ENVIRONMENT) {
|
||||||
|
case "Prod":
|
||||||
|
initializeSalesforceWebchatForProd();
|
||||||
|
break;
|
||||||
|
case "QA":
|
||||||
|
case "SysTest":
|
||||||
|
initializeSalesforceWebchatForQa();
|
||||||
|
break;
|
||||||
|
case "Dev":
|
||||||
|
case "Localhost":
|
||||||
|
initializeSalesforceWebchatForDev();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
components: {},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style type="text/css">
|
||||||
|
.embeddedServiceHelpButton .helpButton .uiButton {
|
||||||
|
background-color: #167cac;
|
||||||
|
font-family: "Arial", sans-serif;
|
||||||
|
}
|
||||||
|
.embeddedServiceHelpButton .helpButton .uiButton:focus {
|
||||||
|
outline: 1px solid #167cac;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -5,6 +5,7 @@
|
||||||
:class="[
|
:class="[
|
||||||
this.buttonLabelSubCopy ? 'has-subheader' : '',
|
this.buttonLabelSubCopy ? 'has-subheader' : '',
|
||||||
this.additionalButtonData.isInsuranceSelected ? 'is-insurance' : '',
|
this.additionalButtonData.isInsuranceSelected ? 'is-insurance' : '',
|
||||||
|
this.hasPackageDiscount() ? 'has-package-discount' : '',
|
||||||
]"
|
]"
|
||||||
for="testradio">
|
for="testradio">
|
||||||
<div class="package-specs">
|
<div class="package-specs">
|
||||||
|
|
@ -54,12 +55,7 @@
|
||||||
v-html="this.buttonFooterCopy"></div>
|
v-html="this.buttonFooterCopy"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div v-if="hasPackageDiscount()" class="special-save-box">
|
||||||
v-if="
|
|
||||||
this.additionalButtonData.servicePackageDiscount &&
|
|
||||||
this.additionalButtonData.Text
|
|
||||||
"
|
|
||||||
class="special-save-box">
|
|
||||||
<span v-html="this.additionalButtonData.Text"></span>
|
<span v-html="this.additionalButtonData.Text"></span>
|
||||||
</div>
|
</div>
|
||||||
<span class="pricing-info">
|
<span class="pricing-info">
|
||||||
|
|
@ -144,6 +140,11 @@ export default {
|
||||||
truncatedSinglePayment() {
|
truncatedSinglePayment() {
|
||||||
return "$" + Math.trunc(this.buttonAuxillaryCopy.replace("$", ""));
|
return "$" + Math.trunc(this.buttonAuxillaryCopy.replace("$", ""));
|
||||||
},
|
},
|
||||||
|
hasPackageDiscount() {
|
||||||
|
return (
|
||||||
|
this.additionalButtonData.servicePackageDiscount && this.additionalButtonData.Text
|
||||||
|
);
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -212,12 +213,6 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
&.has-subheader {
|
&.has-subheader {
|
||||||
min-height: 150px;
|
|
||||||
|
|
||||||
&.is-insurance {
|
|
||||||
min-height: 72px;
|
|
||||||
}
|
|
||||||
|
|
||||||
& > .package-specs {
|
& > .package-specs {
|
||||||
& > div:first-of-type {
|
& > div:first-of-type {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -225,6 +220,10 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.has-package-discount {
|
||||||
|
min-height: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
content: "";
|
content: "";
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="footer-inner-wrapper">
|
<div class="footer-inner-wrapper">
|
||||||
<p class="mx-3 my-0 pb-1">© 2025 Safelite Group</p>
|
|
||||||
<textLink
|
<textLink
|
||||||
linkType="newWindowLink"
|
linkType="newWindowLink"
|
||||||
text="Terms of service"
|
text="Terms of service"
|
||||||
|
|
@ -39,6 +38,7 @@
|
||||||
href="https://www.safelite.com/ccpa-privacy-policy"
|
href="https://www.safelite.com/ccpa-privacy-policy"
|
||||||
target="_blank" />
|
target="_blank" />
|
||||||
</div>
|
</div>
|
||||||
|
<p class="mx-3 my-0 pb-1">© 2025 Safelite Group</p>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -60,8 +60,9 @@ export default {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
align-items: end;
|
align-items: center;
|
||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
|
padding: 0 0 2rem 0;
|
||||||
|
|
||||||
.skyline {
|
.skyline {
|
||||||
height: 96px;
|
height: 96px;
|
||||||
|
|
@ -70,30 +71,34 @@ export default {
|
||||||
height: 48px;
|
height: 48px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
@include media-breakpoint-up(md) {
|
||||||
|
font-size: 1rem;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.footer-inner-wrapper {
|
.footer-inner-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
border-top: 1px solid $gray;
|
border-top: 1px solid $gray;
|
||||||
padding: 2rem 0;
|
padding: 2rem 0 0 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
color: $gray-600;
|
||||||
p {
|
|
||||||
font-size: 0.875rem;
|
|
||||||
color: $black;
|
|
||||||
@include media-breakpoint-up(md) {
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(a) {
|
:deep(a) {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
&.new-window-link {
|
&.new-window-link {
|
||||||
margin: 0 0.75rem;
|
margin: 0 0.75rem;
|
||||||
|
color: $gray-600;
|
||||||
}
|
}
|
||||||
&.navigation-link {
|
&.navigation-link {
|
||||||
margin: 0 0.75rem;
|
margin: 0 0.75rem;
|
||||||
|
color: $gray-600;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,10 +2,12 @@
|
||||||
<div
|
<div
|
||||||
class="funnel-header d-flex justify-content-center align-items-center flex-column"
|
class="funnel-header d-flex justify-content-center align-items-center flex-column"
|
||||||
v-if="imageSrc">
|
v-if="imageSrc">
|
||||||
|
<salesforceWebchat hideSalesforceWebchatLaunchButton />
|
||||||
<img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
|
<img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
|
||||||
<!-- // menu-modal temporarily not in use until the hamburger menu is re-implemented for use with the progress bar. See display: none below. -->
|
<!-- // menu-modal temporarily not in use until the hamburger menu is re-implemented for use with the progress bar. See display: none below. -->
|
||||||
<menuModal />
|
<menuModal />
|
||||||
<!-- // menu-modal temporarily not in use until the hamburger menu is re-implemented for use with the progress bar. See display: none below. -->
|
<!-- // menu-modal temporarily not in use until the hamburger menu is re-implemented for use with the progress bar. See display: none below. -->
|
||||||
|
<progressBar />
|
||||||
</div>
|
</div>
|
||||||
<template v-for="globalAlert in globalAlertMessages" :key="globalAlert.id">
|
<template v-for="globalAlert in globalAlertMessages" :key="globalAlert.id">
|
||||||
<transition name="fade" mode="out-in">
|
<transition name="fade" mode="out-in">
|
||||||
|
|
@ -26,6 +28,8 @@ import alert from "@/ux-components/alert/alert";
|
||||||
import eventBus from "@/helpers/event-bus/event-bus";
|
import eventBus from "@/helpers/event-bus/event-bus";
|
||||||
import { globalEvents } from "@/constants/events";
|
import { globalEvents } from "@/constants/events";
|
||||||
import menuModal from "@/fmg-components/funnel-header/menu-modal/menu-modal";
|
import menuModal from "@/fmg-components/funnel-header/menu-modal/menu-modal";
|
||||||
|
import salesforceWebchat from "../../digital-components/salesforce-webchat/salesforce-webchat.vue";
|
||||||
|
import progressBar from "@/fmg-components/funnel-header/progress-bar/progress-bar";
|
||||||
|
|
||||||
// Constants
|
// Constants
|
||||||
const ALERT_DURATION = 3000; // millisecond time to display alert before dismissal
|
const ALERT_DURATION = 3000; // millisecond time to display alert before dismissal
|
||||||
|
|
@ -39,6 +43,10 @@ export default {
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
cmsWidgetName: String,
|
cmsWidgetName: String,
|
||||||
|
hideSalesforceWebchatLaunchButton: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
imageSrc() {
|
imageSrc() {
|
||||||
|
|
@ -62,6 +70,8 @@ export default {
|
||||||
components: {
|
components: {
|
||||||
alert,
|
alert,
|
||||||
menuModal,
|
menuModal,
|
||||||
|
salesforceWebchat,
|
||||||
|
progressBar,
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
// Check if alert event is on the bus
|
// Check if alert event is on the bus
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,84 @@
|
||||||
|
import { shallowMount } from "@vue/test-utils";
|
||||||
|
import progressBar from "./progress-bar";
|
||||||
|
import store from "@/store";
|
||||||
|
|
||||||
|
describe("progressBar", () => {
|
||||||
|
test("progress should be 0", () => {
|
||||||
|
// Arrange
|
||||||
|
|
||||||
|
// Act
|
||||||
|
const wrapper = shallowMount(progressBar, {
|
||||||
|
mixins: [mockMixin],
|
||||||
|
});
|
||||||
|
|
||||||
|
// Assert
|
||||||
|
expect(wrapper.vm.progress).toBe(0);
|
||||||
|
wrapper.unmount();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("progressBar", () => {
|
||||||
|
test("progress should be 4%", () => {
|
||||||
|
// Arrange
|
||||||
|
store.getters = {
|
||||||
|
applicationUser: {
|
||||||
|
lastPageVisited: "vehicle",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
// Act
|
||||||
|
const wrapper = shallowMount(progressBar, {
|
||||||
|
mixins: [mockMixin],
|
||||||
|
});
|
||||||
|
|
||||||
|
// Assert
|
||||||
|
expect(wrapper.vm.progress).toBe(4);
|
||||||
|
wrapper.unmount();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("progressBar", () => {
|
||||||
|
test("progress should be 48%", () => {
|
||||||
|
// Arrange
|
||||||
|
store.getters = {
|
||||||
|
applicationUser: {
|
||||||
|
lastPageVisited: "quote",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
// Act
|
||||||
|
const wrapper = shallowMount(progressBar, {
|
||||||
|
mixins: [mockMixin],
|
||||||
|
});
|
||||||
|
|
||||||
|
// Assert
|
||||||
|
expect(wrapper.vm.progress).toBe(48);
|
||||||
|
wrapper.unmount();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("progressBar", () => {
|
||||||
|
test("progress should be 100%", () => {
|
||||||
|
// Arrange
|
||||||
|
store.getters = {
|
||||||
|
applicationUser: {
|
||||||
|
lastPageVisited: "confirmation",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
// Act
|
||||||
|
const wrapper = shallowMount(progressBar, {
|
||||||
|
mixins: [mockMixin],
|
||||||
|
});
|
||||||
|
|
||||||
|
// Assert
|
||||||
|
expect(wrapper.vm.progress).toBe(100);
|
||||||
|
wrapper.unmount();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const mockMixin = {
|
||||||
|
methods: {
|
||||||
|
getProgress: jest.fn(),
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
<template>
|
||||||
|
<div id="progress-bar-container">
|
||||||
|
<progress v-if="progress > 0" :value="progress" max="100" v-html="progress + '%'" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import store from "@/store";
|
||||||
|
import { getProgressBarPercentage } from "@/constants/progress-bar-mapper";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "progressBar",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
progress: this.getProgress(),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getProgress() {
|
||||||
|
var pageName = store.getters.applicationUser.lastPageVisited;
|
||||||
|
return getProgressBarPercentage(pageName);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
#progress-bar-container {
|
||||||
|
padding: 0.75rem 0;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
progress {
|
||||||
|
height: 10px;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
/* Firefox */
|
||||||
|
appearance: none;
|
||||||
|
background-color: $blue-100;
|
||||||
|
border: 0;
|
||||||
|
border-radius: $border-radius-pill;
|
||||||
|
box-shadow: $box-shadow-inset;
|
||||||
|
|
||||||
|
&::-moz-progress-bar {
|
||||||
|
background-color: $blue;
|
||||||
|
border-radius: $border-radius-pill;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Webkit */
|
||||||
|
-webkit-appearance: none;
|
||||||
|
&::-webkit-progress-bar {
|
||||||
|
background-color: $blue-100;
|
||||||
|
border-radius: $border-radius-pill;
|
||||||
|
box-shadow: $box-shadow-inset;
|
||||||
|
}
|
||||||
|
&::-webkit-progress-value {
|
||||||
|
background-color: $blue;
|
||||||
|
border-radius: $border-radius-pill;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -182,39 +182,6 @@ describe("address-lookup.vue", () => {
|
||||||
// Assert
|
// Assert
|
||||||
expect(wrapper.findComponent({ ref: "alertVinNotFound" }).isVisible()).toBe(true);
|
expect(wrapper.findComponent({ ref: "alertVinNotFound" }).isVisible()).toBe(true);
|
||||||
});
|
});
|
||||||
test("should show the AlertNoService when displayNoServiceAlert is true", async () => {
|
|
||||||
const { wrapper } = setupMocks({
|
|
||||||
isZipServiceable: true,
|
|
||||||
displayNoServiceAlert: true,
|
|
||||||
lookupVinbyAddressResponse: {
|
|
||||||
isStatePermissible: true,
|
|
||||||
vinVehicles: [], // Return no vehicles
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
// Set displayNoServiceAlert to true
|
|
||||||
await wrapper.setData({ displayNoServiceAlert: true });
|
|
||||||
|
|
||||||
// Check if the AlertNoService component is rendered
|
|
||||||
const alertNoService = wrapper.findComponent({ ref: "AlertNoService" });
|
|
||||||
expect(alertNoService.exists()).toBe(true);
|
|
||||||
});
|
|
||||||
test("should hide the AlertNoService when displayNoServiceAlert is false", async () => {
|
|
||||||
const { wrapper } = setupMocks({
|
|
||||||
isZipServiceable: true,
|
|
||||||
displayNoServiceAlert: false,
|
|
||||||
lookupVinbyAddressResponse: {
|
|
||||||
isStatePermissible: true,
|
|
||||||
vinVehicles: [], // Return no vehicles
|
|
||||||
},
|
|
||||||
});
|
|
||||||
// Ensure displayNoServiceAlert is false
|
|
||||||
await wrapper.setData({ displayNoServiceAlert: false });
|
|
||||||
|
|
||||||
// Check if the AlertNoService component is not rendered
|
|
||||||
const alertNoService = wrapper.findComponent({ ref: "AlertNoService" });
|
|
||||||
expect(alertNoService.exists()).toBe(false);
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
||||||
describe("navigation", () => {
|
describe("navigation", () => {
|
||||||
|
|
@ -774,18 +741,6 @@ function setupMocks({
|
||||||
wrapper.vm.setCmsContent = jest.fn();
|
wrapper.vm.setCmsContent = jest.fn();
|
||||||
wrapper.vm.$refs.navbar.updateButtonText = jest.fn();
|
wrapper.vm.$refs.navbar.updateButtonText = jest.fn();
|
||||||
wrapper.vm.$refs.navbar.removeLoader = jest.fn();
|
wrapper.vm.$refs.navbar.removeLoader = jest.fn();
|
||||||
const closestShops = {
|
|
||||||
data: {
|
|
||||||
providers: [
|
|
||||||
{ id: 1, name: "Shop 1" },
|
|
||||||
{ id: 2, name: "Shop 2" },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
wrapper.vm.findClosestApplicableShops = jest.fn().mockImplementation(() => {
|
|
||||||
return new Promise((resolve) => resolve(closestShops));
|
|
||||||
});
|
|
||||||
|
|
||||||
return { wrapper };
|
return { wrapper };
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -81,20 +81,13 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</transition>
|
</transition>
|
||||||
<alert
|
|
||||||
ref="AlertNoService"
|
|
||||||
v-if="displayNoServiceAlert"
|
|
||||||
class="my-4"
|
|
||||||
cmsWidgetName="AlertNoServiceWidget"
|
|
||||||
alertClass="alert-danger"
|
|
||||||
v-bind:isDismissible="false" />
|
|
||||||
<navbar
|
<navbar
|
||||||
cmsWidgetName="FunnelFooterWidget"
|
cmsWidgetName="FunnelFooterWidget"
|
||||||
ref="navbar"
|
ref="navbar"
|
||||||
:isDisabled="!meta.valid"
|
:isDisabled="!meta.valid"
|
||||||
@ForwardClicked="forwardButtonAction"
|
@ForwardClicked="forwardButtonAction"
|
||||||
@back-clicked="backButtonAction"
|
@back-clicked="backButtonAction"
|
||||||
:isForwardActionDisabled="!meta.valid || displayNoServiceAlert" />
|
:isForwardActionDisabled="!meta.valid" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -172,7 +165,7 @@ export default {
|
||||||
},
|
},
|
||||||
serviceZipCode: this.getServiceZipFromStore(),
|
serviceZipCode: this.getServiceZipFromStore(),
|
||||||
carId: this.getCarIdfromStore(),
|
carId: this.getCarIdfromStore(),
|
||||||
isHeavyTruck: this.getIsVehicleHeavyTruckFromStore(),
|
isHeavyTruck: this.getIsVehicleHeavyTruckServiceableFromStore(),
|
||||||
displayNonServiceableZipAlert: false,
|
displayNonServiceableZipAlert: false,
|
||||||
displayVinNotFoundAlert: false,
|
displayVinNotFoundAlert: false,
|
||||||
displayMatchedDifferentVehicleAlert: false,
|
displayMatchedDifferentVehicleAlert: false,
|
||||||
|
|
@ -184,7 +177,6 @@ export default {
|
||||||
displayInvalidZipAlert: false,
|
displayInvalidZipAlert: false,
|
||||||
showServiceZipField: this.getServiceZipFromStore(),
|
showServiceZipField: this.getServiceZipFromStore(),
|
||||||
isZipServiceable: false,
|
isZipServiceable: false,
|
||||||
displayNoServiceAlert: false,
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
@ -232,8 +224,8 @@ export default {
|
||||||
getCarIdfromStore() {
|
getCarIdfromStore() {
|
||||||
return store.getters.vehicle.carId;
|
return store.getters.vehicle.carId;
|
||||||
},
|
},
|
||||||
getIsVehicleHeavyTruckFromStore() {
|
getIsVehicleHeavyTruckServiceableFromStore() {
|
||||||
return store.getters.isHeavyTruckVehicle;
|
return store.getters.vehicle.isBigTruck && store.getters.vehicle.canSafeliteService;
|
||||||
},
|
},
|
||||||
async findClosestApplicableShops() {
|
async findClosestApplicableShops() {
|
||||||
return await this.dispatchStoreActionWithLogging(
|
return await this.dispatchStoreActionWithLogging(
|
||||||
|
|
@ -301,17 +293,6 @@ export default {
|
||||||
return this.$refs.navbar.removeLoader();
|
return this.$refs.navbar.removeLoader();
|
||||||
}
|
}
|
||||||
this.displayInvalidZipAlert = false;
|
this.displayInvalidZipAlert = false;
|
||||||
if (this.serviceZipCode != null && this.isHeavyTruck) {
|
|
||||||
const closestShops = await this.findClosestApplicableShops(
|
|
||||||
this.serviceZipCode,
|
|
||||||
this.carId
|
|
||||||
);
|
|
||||||
this.displayNoServiceAlert = !closestShops?.data?.providers?.length;
|
|
||||||
if (this.displayNoServiceAlert) {
|
|
||||||
return this.$refs.navbar.removeLoader();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const carsFound = resultMap.vinLookupResponse.vinVehicles;
|
const carsFound = resultMap.vinLookupResponse.vinVehicles;
|
||||||
|
|
||||||
// Handle cases for different amounts of VINS found for the address.
|
// Handle cases for different amounts of VINS found for the address.
|
||||||
|
|
@ -463,7 +444,6 @@ export default {
|
||||||
this.displayNonServiceableZipAlert = false;
|
this.displayNonServiceableZipAlert = false;
|
||||||
this.displayMatchedDifferentVehicleAlert = false;
|
this.displayMatchedDifferentVehicleAlert = false;
|
||||||
this.displayVinLookupByHomeAddressNotAllowedAlert = false;
|
this.displayVinLookupByHomeAddressNotAllowedAlert = false;
|
||||||
this.displayNoServiceAlert = false;
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
@ -515,7 +495,6 @@ export default {
|
||||||
handler(newValue) {
|
handler(newValue) {
|
||||||
// If they modify the service zip code, then hide the error message.
|
// If they modify the service zip code, then hide the error message.
|
||||||
this.displayNonServiceableZipAlert = false;
|
this.displayNonServiceableZipAlert = false;
|
||||||
this.displayNoServiceAlert = false;
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
showServiceZipField: {
|
showServiceZipField: {
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,10 @@
|
||||||
<div class="container-fluid pb-2">
|
<div class="container-fluid pb-2">
|
||||||
<div class="row justify-content-center">
|
<div class="row justify-content-center">
|
||||||
<div class="col-md-6">
|
<div class="col-md-6">
|
||||||
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
|
<funnelHeader
|
||||||
|
cmsWidgetName="FunnelHeaderWidget"
|
||||||
|
ref="funnelHeader"
|
||||||
|
hideSalesforceWebchatLaunchButton />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row justify-content-center">
|
<div class="row justify-content-center">
|
||||||
|
|
|
||||||
|
|
@ -611,42 +611,6 @@ describe("license-plate-lookup.vue", () => {
|
||||||
expect(arePagePrerequisitesValid).toBe(false);
|
expect(arePagePrerequisitesValid).toBe(false);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe("alerts", () => {
|
|
||||||
test("should show the AlertNoService when displayNoServiceAlert is true", async () => {
|
|
||||||
const { wrapper } = setupMocks({
|
|
||||||
isZipServiceable: true,
|
|
||||||
displayNoServiceAlert: true,
|
|
||||||
lookupVinbyAddressResponse: {
|
|
||||||
isStatePermissible: true,
|
|
||||||
vinVehicles: [], // Return no vehicles
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
// Set displayNoServiceAlert to true
|
|
||||||
await wrapper.setData({ displayNoServiceAlert: true });
|
|
||||||
|
|
||||||
// Check if the AlertNoService component is rendered
|
|
||||||
const alertNoService = wrapper.findComponent({ ref: "AlertNoService" });
|
|
||||||
expect(alertNoService.exists()).toBe(true);
|
|
||||||
});
|
|
||||||
test("should hide the AlertNoService when displayNoServiceAlert is false", async () => {
|
|
||||||
const { wrapper } = setupMocks({
|
|
||||||
isZipServiceable: true,
|
|
||||||
displayNoServiceAlert: false,
|
|
||||||
lookupVinbyAddressResponse: {
|
|
||||||
isStatePermissible: true,
|
|
||||||
vinVehicles: [], // Return no vehicles
|
|
||||||
},
|
|
||||||
});
|
|
||||||
// Ensure displayNoServiceAlert is false
|
|
||||||
await wrapper.setData({ displayNoServiceAlert: false });
|
|
||||||
|
|
||||||
// Check if the AlertNoService component is not rendered
|
|
||||||
const alertNoService = wrapper.findComponent({ ref: "AlertNoService" });
|
|
||||||
expect(alertNoService.exists()).toBe(false);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
||||||
function setupMocks({
|
function setupMocks({
|
||||||
|
|
@ -752,18 +716,5 @@ function setupMocks({
|
||||||
wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => "");
|
wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => "");
|
||||||
wrapper.vm.$refs.navbar.updateButtonText = jest.fn();
|
wrapper.vm.$refs.navbar.updateButtonText = jest.fn();
|
||||||
wrapper.vm.$refs.navbar.removeLoader = jest.fn();
|
wrapper.vm.$refs.navbar.removeLoader = jest.fn();
|
||||||
const closestShops = {
|
|
||||||
data: {
|
|
||||||
providers: [
|
|
||||||
{ id: 1, name: "Shop 1" },
|
|
||||||
{ id: 2, name: "Shop 2" },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
wrapper.vm.findClosestApplicableShops = jest.fn().mockImplementation(() => {
|
|
||||||
return new Promise((resolve) => resolve(closestShops));
|
|
||||||
});
|
|
||||||
|
|
||||||
return { wrapper, apiPromise };
|
return { wrapper, apiPromise };
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -76,7 +76,6 @@
|
||||||
:manualCopy="AlertMatchedDifferentVehicleBody"
|
:manualCopy="AlertMatchedDifferentVehicleBody"
|
||||||
alertClass="alert-warning"
|
alertClass="alert-warning"
|
||||||
v-bind:isDismissible="false" />
|
v-bind:isDismissible="false" />
|
||||||
|
|
||||||
<alert
|
<alert
|
||||||
ref="AlertNoService"
|
ref="AlertNoService"
|
||||||
v-if="displayNoServiceAlert"
|
v-if="displayNoServiceAlert"
|
||||||
|
|
@ -90,7 +89,7 @@
|
||||||
cmsWidgetName="FunnelFooterWidget"
|
cmsWidgetName="FunnelFooterWidget"
|
||||||
:isForwardActionDisabled="!meta.valid"
|
:isForwardActionDisabled="!meta.valid"
|
||||||
@back-clicked="backButtonAction"
|
@back-clicked="backButtonAction"
|
||||||
@ForwardClicked="forwardButtonAction" />
|
@ForwardClicked="forwardButtonAction || displayNoServiceAlert" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -167,7 +166,7 @@ export default {
|
||||||
emailOrSms: this.getEmailOrSmsFromStore(),
|
emailOrSms: this.getEmailOrSmsFromStore(),
|
||||||
serviceZipCode: this.getServiceZipFromStore(),
|
serviceZipCode: this.getServiceZipFromStore(),
|
||||||
carId: this.getCarIdfromStore(),
|
carId: this.getCarIdfromStore(),
|
||||||
isHeavyTruck: this.getIsVehicleHeavyTruckFromStore(),
|
isHeavyTruck: this.getIsVehicleHeavyTruckServiceableFromStore(),
|
||||||
displayNonServiceableZipAlert: false,
|
displayNonServiceableZipAlert: false,
|
||||||
displayVinNotFoundAlert: false,
|
displayVinNotFoundAlert: false,
|
||||||
displayMatchedDifferentVehicleAlert: false,
|
displayMatchedDifferentVehicleAlert: false,
|
||||||
|
|
@ -178,7 +177,6 @@ export default {
|
||||||
displayInvalidZipAlert: false,
|
displayInvalidZipAlert: false,
|
||||||
showServiceZipField: this.getServiceZipFromStore(),
|
showServiceZipField: this.getServiceZipFromStore(),
|
||||||
isZipServiceable: false,
|
isZipServiceable: false,
|
||||||
displayNoServiceAlert: false,
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
@ -214,8 +212,8 @@ export default {
|
||||||
getCarIdfromStore() {
|
getCarIdfromStore() {
|
||||||
return store.getters.vehicle.carId;
|
return store.getters.vehicle.carId;
|
||||||
},
|
},
|
||||||
getIsVehicleHeavyTruckFromStore() {
|
getIsVehicleHeavyTruckServiceableFromStore() {
|
||||||
return store.getters.isHeavyTruckVehicle;
|
return store.getters.vehicle.isBigTruck && store.getters.vehicle.canSafeliteService;
|
||||||
},
|
},
|
||||||
async findClosestApplicableShops() {
|
async findClosestApplicableShops() {
|
||||||
return await this.dispatchStoreActionWithLogging(
|
return await this.dispatchStoreActionWithLogging(
|
||||||
|
|
@ -281,17 +279,6 @@ export default {
|
||||||
this.displayInvalidZipAlert = true;
|
this.displayInvalidZipAlert = true;
|
||||||
return this.$refs.navbar.removeLoader();
|
return this.$refs.navbar.removeLoader();
|
||||||
}
|
}
|
||||||
if (this.isHeavyTruck) {
|
|
||||||
const closestShops = await this.findClosestApplicableShops(
|
|
||||||
this.serviceZipCode,
|
|
||||||
this.carId
|
|
||||||
);
|
|
||||||
this.displayNoServiceAlert = !closestShops?.data?.providers?.length;
|
|
||||||
if (this.displayNoServiceAlert) {
|
|
||||||
return this.$refs.navbar.removeLoader();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if the CarId has changed.
|
// Check if the CarId has changed.
|
||||||
this.isCarIdDifferent =
|
this.isCarIdDifferent =
|
||||||
vinLookup.data.vehicle.carId !== this.$store.getters.vehicle.carId;
|
vinLookup.data.vehicle.carId !== this.$store.getters.vehicle.carId;
|
||||||
|
|
@ -406,7 +393,6 @@ export default {
|
||||||
this.displayMatchedDifferentVehicleAlert = false;
|
this.displayMatchedDifferentVehicleAlert = false;
|
||||||
this.displayVinLookupByHomeAddressNotAllowedAlert = false;
|
this.displayVinLookupByHomeAddressNotAllowedAlert = false;
|
||||||
this.displayInvalidZipAlert = false;
|
this.displayInvalidZipAlert = false;
|
||||||
this.displayNoServiceAlert = false;
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
@ -451,7 +437,6 @@ export default {
|
||||||
serviceZipCode() {
|
serviceZipCode() {
|
||||||
// If they modify the service zip code, then hide the error message.
|
// If they modify the service zip code, then hide the error message.
|
||||||
this.displayNonServiceableZipAlert = false;
|
this.displayNonServiceableZipAlert = false;
|
||||||
this.displayNoServiceAlert = false;
|
|
||||||
this.$refs.navbar.updateButtonText(
|
this.$refs.navbar.updateButtonText(
|
||||||
this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
|
this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,259 @@
|
||||||
|
<template>
|
||||||
|
<div class="alert fade show my-2 py-2 border-0 alert-info" role="alert">
|
||||||
|
<component :is="'script'" src="https://js.afterpay.com/afterpay-1.x.js" async></component>
|
||||||
|
<div class="my-4 alert-heading text-center">
|
||||||
|
<span v-html="afterpayHeaderCopy" />
|
||||||
|
|
||||||
|
<span class="afterpay-amount">{{ this.afterpayPrice }}</span>
|
||||||
|
<br />
|
||||||
|
<span class="alert-sub-heading" v-html="afterpayHeaderSubHeaderCopy" />
|
||||||
|
|
||||||
|
<img :src="afterPayImageUrl" />
|
||||||
|
|
||||||
|
<a
|
||||||
|
id="afterpay-learnmore"
|
||||||
|
href="#"
|
||||||
|
data-afterpay-modal="en_US-safelite"
|
||||||
|
data-bind="click:afterpayLearnMore">
|
||||||
|
<img :src="infoIcon" alt="Info Icon" class="info-icon" />
|
||||||
|
</a>
|
||||||
|
<div class="after-pay">
|
||||||
|
<div
|
||||||
|
class="after-pay-toggle"
|
||||||
|
:class="[isExpanded ? 'expanded' : '']"
|
||||||
|
@click="toggleIsExpanded">
|
||||||
|
<a href="#!" v-html="paymentPlanToggleHeading" />
|
||||||
|
</div>
|
||||||
|
<div class="after-pay-details">
|
||||||
|
<div class="payment-section">
|
||||||
|
<div class="payment-card">
|
||||||
|
<div class="calendar-section">
|
||||||
|
<div class="icon"><img :src="calendarIcon" /></div>
|
||||||
|
<div>Today</div>
|
||||||
|
</div>
|
||||||
|
<div class="payment-amount-section">
|
||||||
|
<div class="icon"><img :src="paymentIcon" /></div>
|
||||||
|
<div class="amount-due">{{ this.afterpayPrice }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="payment-card">
|
||||||
|
<div class="calendar-section">
|
||||||
|
<div class="icon"><img :src="calendarIcon" /></div>
|
||||||
|
<div>2 weeks</div>
|
||||||
|
</div>
|
||||||
|
<div class="payment-amount-section">
|
||||||
|
<div class="icon"><img :src="paymentIcon" /></div>
|
||||||
|
<div class="amount-due">{{ this.afterpayPrice }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="payment-card">
|
||||||
|
<div class="calendar-section">
|
||||||
|
<div class="icon"><img :src="calendarIcon" /></div>
|
||||||
|
<div>4 weeks</div>
|
||||||
|
</div>
|
||||||
|
<div class="payment-amount-section">
|
||||||
|
<div class="icon"><img :src="paymentIcon" /></div>
|
||||||
|
<div class="amount-due">{{ this.afterpayPrice }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="payment-card">
|
||||||
|
<div class="calendar-section">
|
||||||
|
<div class="icon"><img :src="calendarIcon" /></div>
|
||||||
|
<div>6 weeks</div>
|
||||||
|
</div>
|
||||||
|
<div class="payment-amount-section">
|
||||||
|
<div class="icon"><img :src="paymentIcon" /></div>
|
||||||
|
<div class="amount-due">{{ this.afterpayPrice }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="legend">
|
||||||
|
<div class="legend-item">
|
||||||
|
<img :src="calendarKeyIcon" />
|
||||||
|
<span>Payment Schedule</span>
|
||||||
|
</div>
|
||||||
|
<div class="legend-item">
|
||||||
|
<img :src="paymentKeyIcon" />
|
||||||
|
<span>Amount Due</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "afterpay-breakout",
|
||||||
|
|
||||||
|
props: {
|
||||||
|
cmsWidgetName: String,
|
||||||
|
totalAmount: Number,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return { isExpanded: false };
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toggleIsExpanded() {
|
||||||
|
this.isExpanded = !this.isExpanded;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
afterPayImageUrl() {
|
||||||
|
return this.getCmsContent(this.cmsWidgetName, "Image");
|
||||||
|
},
|
||||||
|
hasImage() {
|
||||||
|
return !!this.imageUrl;
|
||||||
|
},
|
||||||
|
afterpayHeaderCopy() {
|
||||||
|
// Text for Afterpay Breakout experiment
|
||||||
|
|
||||||
|
return this.getCmsContent(this.cmsWidgetName, "HeaderText");
|
||||||
|
},
|
||||||
|
afterpayHeaderSubHeaderCopy() {
|
||||||
|
// Text for Afterpay Breakout experiment
|
||||||
|
|
||||||
|
return this.getCmsContent(this.cmsWidgetName, "SubheaderText");
|
||||||
|
},
|
||||||
|
afterpayPrice() {
|
||||||
|
const adjusted = (this.totalAmount / 4).toFixed(2);
|
||||||
|
return `$${adjusted}`;
|
||||||
|
},
|
||||||
|
infoIcon() {
|
||||||
|
return require(`@/assets/img/icons/info-circle.svg`);
|
||||||
|
},
|
||||||
|
calendarIcon() {
|
||||||
|
return require(`@/assets/img/icons/calendar-icon-black.svg`);
|
||||||
|
},
|
||||||
|
paymentIcon() {
|
||||||
|
return require(`@/assets/img/icons/payment-icon-green.svg`);
|
||||||
|
},
|
||||||
|
calendarKeyIcon() {
|
||||||
|
return require(`@/assets/img/icons/calendar-icon-grey.svg`);
|
||||||
|
},
|
||||||
|
paymentKeyIcon() {
|
||||||
|
return require(`@/assets/img/icons/payment-icon-grey.svg`);
|
||||||
|
},
|
||||||
|
paymentPlanToggleHeading() {
|
||||||
|
return this.getCmsContent(this.cmsWidgetName, "BodyText");
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.alert {
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-top: 1rem;
|
||||||
|
|
||||||
|
&.alert-info {
|
||||||
|
.alert-heading {
|
||||||
|
color: #000000;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
@include media-breakpoint-up(md) {
|
||||||
|
margin-left: 1rem;
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.afterpay-amount {
|
||||||
|
color: #0c7e47;
|
||||||
|
}
|
||||||
|
.alert-sub-heading {
|
||||||
|
color: #4b4c4e;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
.after-pay {
|
||||||
|
.after-pay-toggle {
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
content: "";
|
||||||
|
transition: all 0.5s ease;
|
||||||
|
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.9' xml:space='preserve'%3e%3cpath d='M8 8.9c-.2 0-.5-.1-.6-.3L.3 1.5C.1 1.4 0 1.1 0 .9 0 .7.1.4.3.3.4.1.7 0 .9 0c.2 0 .5.1.6.3L8 6.7 14.5.2c.1-.1.4-.2.6-.2.2 0 .5.1.6.3s.3.4.3.6c0 .2-.1.5-.3.6L8.6 8.6c-.1.2-.4.3-.6.3z' fill='%231474a2'/%3e%3c/svg%3e");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: right center;
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
width: 1rem;
|
||||||
|
height: 9px;
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
|
&.expanded:after {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
&.expanded + .after-pay-details {
|
||||||
|
max-height: 500px;
|
||||||
|
transition: all 250ms ease-in;
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.after-pay-toggle a {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #0070d1;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.after-pay-details {
|
||||||
|
max-height: 0;
|
||||||
|
transition: all 250ms ease-out;
|
||||||
|
overflow: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.payment-section {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
@include media-breakpoint-up(md) {
|
||||||
|
gap: 0rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.payment-card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 0.25px #b3b4b5;
|
||||||
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
.calendar-section {
|
||||||
|
background-color: #fff; /* White background for calendar area */
|
||||||
|
padding: 0.5rem;
|
||||||
|
text-align: center;
|
||||||
|
gap: 2px;
|
||||||
|
font-weight: 700;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.payment-amount-section {
|
||||||
|
background-color: #e0f7e9; /* Light green background for payment area */
|
||||||
|
padding: 0.5rem;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-due {
|
||||||
|
color: #00723e; /* Green text */
|
||||||
|
}
|
||||||
|
.legend {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 1rem;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
.legend-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 2px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.legend-item span {
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -117,6 +117,12 @@ function setupMocks() {
|
||||||
|
|
||||||
return "false";
|
return "false";
|
||||||
}),
|
}),
|
||||||
|
hasSettingEqualTo: jest.fn((settingName) => {
|
||||||
|
if (settingName === experimentSettings.DISPLAY_AFTERPAY_BREAKOUT_DISPLAY) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}),
|
||||||
getCmsContent: jest.fn().mockImplementation(() => {
|
getCmsContent: jest.fn().mockImplementation(() => {
|
||||||
return "test text";
|
return "test text";
|
||||||
}),
|
}),
|
||||||
|
|
|
||||||
|
|
@ -39,6 +39,10 @@
|
||||||
:isExpandedOnLoad="false"
|
:isExpandedOnLoad="false"
|
||||||
:isMSRFeeApplicable="isMSRFeeApplicable" />
|
:isMSRFeeApplicable="isMSRFeeApplicable" />
|
||||||
|
|
||||||
|
<afterpayBreakout
|
||||||
|
v-if="isAfterpayBreakoutDisplay"
|
||||||
|
cmsWidgetName="AfterpayBreakoutAlertWidget"
|
||||||
|
:totalAmount="totalAmountDue" />
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -118,6 +122,7 @@ import alert from "@/ux-components/alert/alert";
|
||||||
import textBlock from "@/digital-components/text-block/text-block";
|
import textBlock from "@/digital-components/text-block/text-block";
|
||||||
import checkboxQuestion from "@/digital-components/checkbox-question/checkbox-question";
|
import checkboxQuestion from "@/digital-components/checkbox-question/checkbox-question";
|
||||||
import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal";
|
import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal";
|
||||||
|
import afterpayBreakout from "@/layouts/payment-method/afterpay-breakout/afterpay-breakout";
|
||||||
|
|
||||||
// Supporting Items
|
// Supporting Items
|
||||||
import baseMixin from "@/mixins/base-mixin.js";
|
import baseMixin from "@/mixins/base-mixin.js";
|
||||||
|
|
@ -131,7 +136,6 @@ import {
|
||||||
} from "@/helpers/cms-content-helper";
|
} from "@/helpers/cms-content-helper";
|
||||||
import { paymentMethods } from "@/constants/payment-method-constants";
|
import { paymentMethods } from "@/constants/payment-method-constants";
|
||||||
import { experimentSettings } from "@/constants/experiments";
|
import { experimentSettings } from "@/constants/experiments";
|
||||||
import experimentMixin from "@/mixins/experiment-mixin.js";
|
|
||||||
import {
|
import {
|
||||||
revalidatePromosAndValidateQueryStringPromo,
|
revalidatePromosAndValidateQueryStringPromo,
|
||||||
buildToastMessagesFromRevalidateOrValidatePromoResponse,
|
buildToastMessagesFromRevalidateOrValidatePromoResponse,
|
||||||
|
|
@ -805,6 +809,18 @@ export default {
|
||||||
lineItemsCloneForWatcher() {
|
lineItemsCloneForWatcher() {
|
||||||
return Object.assign({}, this.lineItems);
|
return Object.assign({}, this.lineItems);
|
||||||
},
|
},
|
||||||
|
isRecalPriceRemove() {
|
||||||
|
return (
|
||||||
|
this.getSettingValue(experimentSettings.RECAL_PRICE_REMOVE)?.toLowerCase() ===
|
||||||
|
"true"
|
||||||
|
);
|
||||||
|
},
|
||||||
|
isAfterpayBreakoutDisplay() {
|
||||||
|
return (
|
||||||
|
(!this.isRecalPriceRemove || !this.isRecalibrationOnOrder) &&
|
||||||
|
this.hasSettingEqualTo(experimentSettings.DISPLAY_AFTERPAY_BREAKOUT_DISPLAY, "true")
|
||||||
|
);
|
||||||
|
},
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
customCtaCopy(newValue) {
|
customCtaCopy(newValue) {
|
||||||
|
|
@ -856,6 +872,7 @@ export default {
|
||||||
textBlock,
|
textBlock,
|
||||||
checkboxQuestion,
|
checkboxQuestion,
|
||||||
contentGroupModal,
|
contentGroupModal,
|
||||||
|
afterpayBreakout,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -891,7 +891,7 @@ export default {
|
||||||
|
|
||||||
&.funnel-header-wrapper,
|
&.funnel-header-wrapper,
|
||||||
&.save-progress-popup {
|
&.save-progress-popup {
|
||||||
display: block;
|
display: flex;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,7 @@
|
||||||
marginTopSizeOverride="1" />
|
marginTopSizeOverride="1" />
|
||||||
</template>
|
</template>
|
||||||
<locationAlerts cmsWidgetPrefix="LocationAlert-" ref="locationAlerts" />
|
<locationAlerts cmsWidgetPrefix="LocationAlert-" ref="locationAlerts" />
|
||||||
<datePickerForPricingByDay
|
<datePicker
|
||||||
customComponentId="dateQuestion"
|
customComponentId="dateQuestion"
|
||||||
selectableDatesSetting="custom"
|
selectableDatesSetting="custom"
|
||||||
ref="datePicker"
|
ref="datePicker"
|
||||||
|
|
@ -77,7 +77,7 @@ import navbar from "@/fmg-components/nav-bar/nav-bar";
|
||||||
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
|
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
|
||||||
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
|
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
|
||||||
import { Form, defineRule } from "vee-validate";
|
import { Form, defineRule } from "vee-validate";
|
||||||
import datePickerForPricingByDay from "@/experiment-components/date-picker-for-pricing-by-day";
|
import datePicker from "@/digital-components/date-picker/date-picker";
|
||||||
import locationAlerts from "@/layouts/schedule/location-alerts/location-alerts";
|
import locationAlerts from "@/layouts/schedule/location-alerts/location-alerts";
|
||||||
import timeSlotModalQuestion from "./time-slot-modal-question/time-slot-modal-question";
|
import timeSlotModalQuestion from "./time-slot-modal-question/time-slot-modal-question";
|
||||||
import textBlock from "@/digital-components/text-block/text-block";
|
import textBlock from "@/digital-components/text-block/text-block";
|
||||||
|
|
@ -297,14 +297,13 @@ export default {
|
||||||
);
|
);
|
||||||
|
|
||||||
// While Pricing By Day Experiment is active, using the updated datePicker
|
// While Pricing By Day Experiment is active, using the updated datePicker
|
||||||
const datePickerInitialDataPromise =
|
const datePickerInitialDataPromise = await datePicker.methods.loadInitialData({
|
||||||
await datePickerForPricingByDay.methods.loadInitialData({
|
// setup config options for date-picker
|
||||||
// setup config options for date-picker
|
selectableDatesSetting: "custom",
|
||||||
selectableDatesSetting: "custom",
|
initialViewRowsToShow: 5,
|
||||||
initialViewRowsToShow: 5,
|
customSelectableDatesCallback: getAvailableDates,
|
||||||
customSelectableDatesCallback: getAvailableDates,
|
preSelectedDate: preSelectedDate,
|
||||||
preSelectedDate: preSelectedDate,
|
});
|
||||||
});
|
|
||||||
|
|
||||||
// Get pricingByDayUpcharge needed for Pricing By Day
|
// Get pricingByDayUpcharge needed for Pricing By Day
|
||||||
const pricingByDayUpchargePartPromise = showPricingByDay
|
const pricingByDayUpchargePartPromise = showPricingByDay
|
||||||
|
|
@ -734,7 +733,7 @@ export default {
|
||||||
funnelSubHeader,
|
funnelSubHeader,
|
||||||
Form,
|
Form,
|
||||||
loadingModal,
|
loadingModal,
|
||||||
datePickerForPricingByDay,
|
datePicker,
|
||||||
locationAlerts,
|
locationAlerts,
|
||||||
timeSlotModalQuestion,
|
timeSlotModalQuestion,
|
||||||
textBlock,
|
textBlock,
|
||||||
|
|
|
||||||
|
|
@ -100,7 +100,7 @@ describe("appointment-type-question.vue", () => {
|
||||||
]);
|
]);
|
||||||
});
|
});
|
||||||
|
|
||||||
it("Should display only the In-Shop answer when only in-shop service is available", async () => {
|
it("Should display only the In-Shop and Drop-Off answers when only in-shop service is available", async () => {
|
||||||
// Arrange/Act
|
// Arrange/Act
|
||||||
const { wrapper } = setupMocks({
|
const { wrapper } = setupMocks({
|
||||||
mixins: [mockMixin],
|
mixins: [mockMixin],
|
||||||
|
|
@ -108,7 +108,6 @@ describe("appointment-type-question.vue", () => {
|
||||||
cmsWidgetName: cmsWidgetName,
|
cmsWidgetName: cmsWidgetName,
|
||||||
isServiceableInshop: true,
|
isServiceableInshop: true,
|
||||||
isServiceableMobile: false,
|
isServiceableMobile: false,
|
||||||
isServiceableDropoff: false,
|
|
||||||
},
|
},
|
||||||
mountOptions: {
|
mountOptions: {
|
||||||
attachTo: document.body,
|
attachTo: document.body,
|
||||||
|
|
@ -124,6 +123,13 @@ describe("appointment-type-question.vue", () => {
|
||||||
SubWidgetName: "",
|
SubWidgetName: "",
|
||||||
Text: "In-shop",
|
Text: "In-shop",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
AnswerImageUrl: "",
|
||||||
|
Name: "Dropoff",
|
||||||
|
SubText: "",
|
||||||
|
SubWidgetName: "",
|
||||||
|
Text: "Drop-off",
|
||||||
|
},
|
||||||
]);
|
]);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -32,7 +32,6 @@ export default {
|
||||||
cmsWidgetName: String,
|
cmsWidgetName: String,
|
||||||
isServiceableMobile: Boolean,
|
isServiceableMobile: Boolean,
|
||||||
isServiceableInshop: Boolean,
|
isServiceableInshop: Boolean,
|
||||||
isServiceableDropoff: Boolean,
|
|
||||||
mobileFeeApplies: Boolean,
|
mobileFeeApplies: Boolean,
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
@ -46,7 +45,7 @@ export default {
|
||||||
const shouldShowMobile = this.isServiceableMobile;
|
const shouldShowMobile = this.isServiceableMobile;
|
||||||
const shouldShowInshop = this.isServiceableInshop;
|
const shouldShowInshop = this.isServiceableInshop;
|
||||||
const shouldShowDropoff =
|
const shouldShowDropoff =
|
||||||
this.isServiceableDropoff && !this.$store.getters.damage.isRepair;
|
this.isServiceableInshop && !this.$store.getters.damage.isRepair;
|
||||||
|
|
||||||
var answers = this.answersFromCms
|
var answers = this.answersFromCms
|
||||||
? this.answersFromCms.filter((answer) => {
|
? this.answersFromCms.filter((answer) => {
|
||||||
|
|
@ -78,11 +77,6 @@ export default {
|
||||||
isMobileOnly() {
|
isMobileOnly() {
|
||||||
return this.isServiceableMobile && !this.isServiceableInshop;
|
return this.isServiceableMobile && !this.isServiceableInshop;
|
||||||
},
|
},
|
||||||
isInshopOnly() {
|
|
||||||
return (
|
|
||||||
this.isServiceableInshop && !this.isServiceableMobile && !this.isServiceableDropoff
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
answersToDisplay: {
|
answersToDisplay: {
|
||||||
|
|
@ -92,7 +86,7 @@ export default {
|
||||||
newValue.length == 1 &&
|
newValue.length == 1 &&
|
||||||
newValue.findIndex((answer) => answer.Name == "Mobile") != -1
|
newValue.findIndex((answer) => answer.Name == "Mobile") != -1
|
||||||
) {
|
) {
|
||||||
this.selectedValue = "Mobile";
|
this.selectedValues = "Mobile";
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
immediate: true,
|
immediate: true,
|
||||||
|
|
@ -100,14 +94,7 @@ export default {
|
||||||
isMobileOnly: {
|
isMobileOnly: {
|
||||||
handler(newValue) {
|
handler(newValue) {
|
||||||
if (newValue) {
|
if (newValue) {
|
||||||
this.selectedValue = "Mobile";
|
this.selectedValues = "Mobile";
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
isInshopOnly: {
|
|
||||||
handler(newValue) {
|
|
||||||
if (newValue) {
|
|
||||||
this.selectedValue = "Inshop";
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -76,7 +76,6 @@
|
||||||
v-show="isAppointmentTypeDisplayed"
|
v-show="isAppointmentTypeDisplayed"
|
||||||
:isServiceableMobile="isServiceableMobile"
|
:isServiceableMobile="isServiceableMobile"
|
||||||
:isServiceableInshop="isServiceableInshop"
|
:isServiceableInshop="isServiceableInshop"
|
||||||
:isServiceableDropoff="isServiceableDropoff"
|
|
||||||
:isDisplayed="isAppointmentTypeDisplayed"
|
:isDisplayed="isAppointmentTypeDisplayed"
|
||||||
:mobileFeeApplies="mobileFeeApplies"
|
:mobileFeeApplies="mobileFeeApplies"
|
||||||
ref="appointmentTypeQuestion"
|
ref="appointmentTypeQuestion"
|
||||||
|
|
@ -197,8 +196,6 @@ export default {
|
||||||
isVehicleProtected: this.getIsVehicleProtectedFromStore(),
|
isVehicleProtected: this.getIsVehicleProtectedFromStore(),
|
||||||
isGlassServiceableInshop: null,
|
isGlassServiceableInshop: null,
|
||||||
isRecalibrationServiceableInshop: null,
|
isRecalibrationServiceableInshop: null,
|
||||||
isGlassServiceableDropoff: null,
|
|
||||||
isRecalibrationServiceableDropoff: null,
|
|
||||||
isGlassServiceableMobile: null,
|
isGlassServiceableMobile: null,
|
||||||
isRecalibrationServiceableMobile: null,
|
isRecalibrationServiceableMobile: null,
|
||||||
selectedAppointmentType: this.getSelectedAppointmentType(),
|
selectedAppointmentType: this.getSelectedAppointmentType(),
|
||||||
|
|
@ -357,13 +354,6 @@ export default {
|
||||||
return this.isGlassServiceableInshop;
|
return this.isGlassServiceableInshop;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
isServiceableDropoff() {
|
|
||||||
if (this.isRecalibrationServiceableDropoff !== null) {
|
|
||||||
return this.isGlassServiceableDropoff && this.isRecalibrationServiceableDropoff;
|
|
||||||
} else {
|
|
||||||
return this.isGlassServiceableDropoff;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
isShopQuestionDisplayed() {
|
isShopQuestionDisplayed() {
|
||||||
return (
|
return (
|
||||||
this.selectedAppointmentType === "Inshop" ||
|
this.selectedAppointmentType === "Inshop" ||
|
||||||
|
|
@ -569,9 +559,6 @@ export default {
|
||||||
this.isGlassServiceableInshop = serviceabilityDetails.isGlassServiceableInshop;
|
this.isGlassServiceableInshop = serviceabilityDetails.isGlassServiceableInshop;
|
||||||
this.isRecalibrationServiceableInshop =
|
this.isRecalibrationServiceableInshop =
|
||||||
serviceabilityDetails.isRecalibrationServiceableInshop;
|
serviceabilityDetails.isRecalibrationServiceableInshop;
|
||||||
this.isGlassServiceableDropoff = serviceabilityDetails.isGlassServiceableDropoff;
|
|
||||||
this.isRecalibrationServiceableDropoff =
|
|
||||||
serviceabilityDetails.isRecalibrationServiceableDropoff;
|
|
||||||
this.isGlassServiceableMobile = serviceabilityDetails.isGlassServiceableMobile;
|
this.isGlassServiceableMobile = serviceabilityDetails.isGlassServiceableMobile;
|
||||||
this.isRecalibrationServiceableMobile =
|
this.isRecalibrationServiceableMobile =
|
||||||
serviceabilityDetails.isRecalibrationServiceableMobile;
|
serviceabilityDetails.isRecalibrationServiceableMobile;
|
||||||
|
|
|
||||||
|
|
@ -415,33 +415,6 @@ describe("service-zip.vue", () => {
|
||||||
expect(wrapper.vm.displayInvalidZipAlert).toBe(false);
|
expect(wrapper.vm.displayInvalidZipAlert).toBe(false);
|
||||||
expect(wrapper.vm.displayNonServiceableZipAlert).toBe(false);
|
expect(wrapper.vm.displayNonServiceableZipAlert).toBe(false);
|
||||||
});
|
});
|
||||||
test("should show the AlertNoService when displayNoServiceAlert is true", async () => {
|
|
||||||
// Arrange
|
|
||||||
// no changes to store
|
|
||||||
applyMockStoreDataToGetters();
|
|
||||||
|
|
||||||
const wrapper = setupMocks({});
|
|
||||||
wrapper.vm.serviceZipCode = "12345";
|
|
||||||
|
|
||||||
// Act
|
|
||||||
wrapper.vm.displayNoServiceAlert = true;
|
|
||||||
|
|
||||||
// Check if the AlertNoService component is rendered
|
|
||||||
expect(wrapper.vm.displayNoServiceAlert).toBe(true);
|
|
||||||
});
|
|
||||||
test("should hide the AlertNoService when displayNoServiceAlert is false", async () => {
|
|
||||||
// Arrange
|
|
||||||
// no changes to store
|
|
||||||
applyMockStoreDataToGetters();
|
|
||||||
|
|
||||||
const wrapper = setupMocks({});
|
|
||||||
wrapper.vm.serviceZipCode = "12345";
|
|
||||||
//ACT
|
|
||||||
wrapper.vm.displayNoServiceAlert = false;
|
|
||||||
|
|
||||||
// Check if the AlertNoService component is rendered
|
|
||||||
expect(wrapper.vm.displayNoServiceAlert).toBe(false);
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -538,16 +511,5 @@ function setupMocks({ customMountOptions, customZipQuery, customZipDataResponse
|
||||||
];
|
];
|
||||||
|
|
||||||
const wrapper = shallowMount(serviceZip, mountOptions);
|
const wrapper = shallowMount(serviceZip, mountOptions);
|
||||||
wrapper.vm.findClosestApplicableShops = jest.fn().mockImplementation(() => {
|
|
||||||
return Promise.resolve({
|
|
||||||
data: {
|
|
||||||
providers: [
|
|
||||||
{ id: 1, name: "Shop 1" },
|
|
||||||
{ id: 2, name: "Shop 2" },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
return wrapper;
|
return wrapper;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -47,18 +47,10 @@
|
||||||
v-if="displayNonServiceableZipAlert"
|
v-if="displayNonServiceableZipAlert"
|
||||||
alertClass="alert-danger" />
|
alertClass="alert-danger" />
|
||||||
|
|
||||||
<alert
|
|
||||||
ref="AlertNoService"
|
|
||||||
v-if="displayNoServiceAlert"
|
|
||||||
class="my-4"
|
|
||||||
cmsWidgetName="AlertNoServiceWidget"
|
|
||||||
alertClass="alert-danger"
|
|
||||||
v-bind:isDismissible="false" />
|
|
||||||
|
|
||||||
<navbar
|
<navbar
|
||||||
cmsWidgetName="FunnelFooterWidget"
|
cmsWidgetName="FunnelFooterWidget"
|
||||||
ref="navbar"
|
ref="navbar"
|
||||||
:isForwardActionDisabled="!meta.valid || displayNoServiceAlert"
|
:isForwardActionDisabled="!meta.valid"
|
||||||
@back-clicked="backButtonAction"
|
@back-clicked="backButtonAction"
|
||||||
@ForwardClicked="forwardButtonAction" />
|
@ForwardClicked="forwardButtonAction" />
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -119,10 +111,9 @@ export default {
|
||||||
serviceZipCode: this.getZipFromStore() ?? this.$route.query.zipcode,
|
serviceZipCode: this.getZipFromStore() ?? this.$route.query.zipcode,
|
||||||
emailOrSms: this.getEmailOrSmsFromStore(),
|
emailOrSms: this.getEmailOrSmsFromStore(),
|
||||||
carId: this.getCarIdfromStore(),
|
carId: this.getCarIdfromStore(),
|
||||||
isHeavyTruck: this.getIsVehicleHeavyTruckFromStore(),
|
isHeavyTruck: this.getIsVehicleHeavyTruckServiceableFromStore(),
|
||||||
displayInvalidZipAlert: false,
|
displayInvalidZipAlert: false,
|
||||||
displayNonServiceableZipAlert: false,
|
displayNonServiceableZipAlert: false,
|
||||||
displayNoServiceAlert: false,
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -198,8 +189,8 @@ export default {
|
||||||
getCarIdfromStore() {
|
getCarIdfromStore() {
|
||||||
return store.getters.vehicle.carId;
|
return store.getters.vehicle.carId;
|
||||||
},
|
},
|
||||||
getIsVehicleHeavyTruckFromStore() {
|
getIsVehicleHeavyTruckServiceableFromStore() {
|
||||||
return store.getters.isHeavyTruckVehicle;
|
return store.getters.vehicle.isBigTruck && store.getters.vehicle.canSafeliteService;
|
||||||
},
|
},
|
||||||
async findClosestApplicableShops() {
|
async findClosestApplicableShops() {
|
||||||
return await this.dispatchStoreActionWithLogging(
|
return await this.dispatchStoreActionWithLogging(
|
||||||
|
|
@ -208,6 +199,7 @@ export default {
|
||||||
"service-zip"
|
"service-zip"
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|
||||||
async backButtonAction() {
|
async backButtonAction() {
|
||||||
const skipVin = await skipVinLookup();
|
const skipVin = await skipVinLookup();
|
||||||
// route to move backwards
|
// route to move backwards
|
||||||
|
|
@ -286,6 +278,16 @@ export default {
|
||||||
return this.$refs.navbar.removeLoader();
|
return this.$refs.navbar.removeLoader();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
if (this.isHeavyTruck) {
|
||||||
|
const closestShops = await this.findClosestApplicableShops(
|
||||||
|
this.serviceZipCode,
|
||||||
|
this.carId
|
||||||
|
);
|
||||||
|
this.displayNoServiceAlert = !closestShops?.data?.providers?.length;
|
||||||
|
if (this.displayNoServiceAlert) {
|
||||||
|
return this.$refs.navbar.removeLoader();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const payment = this.$store.getters.payment;
|
const payment = this.$store.getters.payment;
|
||||||
const policy = this.$store.getters.policy;
|
const policy = this.$store.getters.policy;
|
||||||
|
|
@ -344,6 +346,7 @@ export default {
|
||||||
serviceZipCode() {
|
serviceZipCode() {
|
||||||
this.displayNonServiceableZipAlert = false;
|
this.displayNonServiceableZipAlert = false;
|
||||||
this.displayNoServiceAlert = false;
|
this.displayNoServiceAlert = false;
|
||||||
|
this.displayNoServiceAlert = false;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
|
|
|
||||||
|
|
@ -258,39 +258,6 @@ describe("vin-lookup.vue", () => {
|
||||||
// Assert
|
// Assert
|
||||||
expect(wrapper.findAllComponents({ name: "alert" }).length).toBe(1);
|
expect(wrapper.findAllComponents({ name: "alert" }).length).toBe(1);
|
||||||
});
|
});
|
||||||
|
|
||||||
test("should show the AlertNoService when displayNoServiceAlert is true", async () => {
|
|
||||||
const { wrapper } = setupMocks({
|
|
||||||
isZipServiceable: true,
|
|
||||||
displayNoServiceAlert: true,
|
|
||||||
lookupVinbyAddressResponse: {
|
|
||||||
isStatePermissible: true,
|
|
||||||
vinVehicles: [], // Return no vehicles
|
|
||||||
},
|
|
||||||
});
|
|
||||||
// Set displayNoServiceAlert to true
|
|
||||||
await wrapper.setData({ displayNoServiceAlert: true });
|
|
||||||
|
|
||||||
// Check if the AlertNoService component is rendered
|
|
||||||
const alertNoService = wrapper.findComponent({ ref: "AlertNoService" });
|
|
||||||
expect(alertNoService.exists()).toBe(true);
|
|
||||||
});
|
|
||||||
test("should hide the AlertNoService when displayNoServiceAlert is false", async () => {
|
|
||||||
const { wrapper } = setupMocks({
|
|
||||||
isZipServiceable: true,
|
|
||||||
displayNoServiceAlert: false,
|
|
||||||
lookupVinbyAddressResponse: {
|
|
||||||
isStatePermissible: true,
|
|
||||||
vinVehicles: [], // Return no vehicles
|
|
||||||
},
|
|
||||||
});
|
|
||||||
// Ensure displayNoServiceAlert is false
|
|
||||||
await wrapper.setData({ displayNoServiceAlert: false });
|
|
||||||
|
|
||||||
// Check if the AlertNoService component is not rendered
|
|
||||||
const alertNoService = wrapper.findComponent({ ref: "AlertNoService" });
|
|
||||||
expect(alertNoService.exists()).toBe(false);
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
||||||
describe("getVinFromImage", () => {
|
describe("getVinFromImage", () => {
|
||||||
|
|
|
||||||
|
|
@ -71,8 +71,7 @@
|
||||||
vinPopulatedOnPageLoad &&
|
vinPopulatedOnPageLoad &&
|
||||||
isInsuranceVerified &&
|
isInsuranceVerified &&
|
||||||
!displayInvalidZipAlert &&
|
!displayInvalidZipAlert &&
|
||||||
!displayNonServiceableZipAlert &&
|
!displayNonServiceableZipAlert
|
||||||
!displayNoServiceAlert
|
|
||||||
"
|
"
|
||||||
alertClass="alert-success" />
|
alertClass="alert-success" />
|
||||||
|
|
||||||
|
|
@ -108,23 +107,14 @@
|
||||||
vinPopulatedOnPageLoad &&
|
vinPopulatedOnPageLoad &&
|
||||||
!isInsuranceVerified &&
|
!isInsuranceVerified &&
|
||||||
!displayInvalidZipAlert &&
|
!displayInvalidZipAlert &&
|
||||||
!displayNonServiceableZipAlert &&
|
!displayNonServiceableZipAlert
|
||||||
!displayNoServiceAlert
|
|
||||||
"
|
"
|
||||||
alertClass="alert-success" />
|
alertClass="alert-success" />
|
||||||
|
|
||||||
<alert
|
|
||||||
ref="AlertNoService"
|
|
||||||
v-if="displayNoServiceAlert"
|
|
||||||
class="my-4"
|
|
||||||
cmsWidgetName="AlertNoServiceWidget"
|
|
||||||
alertClass="alert-danger"
|
|
||||||
v-bind:isDismissible="false" />
|
|
||||||
|
|
||||||
<navbar
|
<navbar
|
||||||
cmsWidgetName="FunnelFooterWidget"
|
cmsWidgetName="FunnelFooterWidget"
|
||||||
ref="navbar"
|
ref="navbar"
|
||||||
:isForwardActionDisabled="!meta.valid || displayNoServiceAlert"
|
:isForwardActionDisabled="!meta.valid"
|
||||||
@back-clicked="backButtonAction"
|
@back-clicked="backButtonAction"
|
||||||
@ForwardClicked="forwardButtonAction" />
|
@ForwardClicked="forwardButtonAction" />
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -208,7 +198,7 @@ export default {
|
||||||
serviceZipCode: this.getZipFromStore() ?? this.$route.query.zipcode,
|
serviceZipCode: this.getZipFromStore() ?? this.$route.query.zipcode,
|
||||||
emailOrSms: this.getEmailOrSmsFromStore(),
|
emailOrSms: this.getEmailOrSmsFromStore(),
|
||||||
carId: this.getCarIdfromStore(),
|
carId: this.getCarIdfromStore(),
|
||||||
isHeavyTruck: this.getIsVehicleHeavyTruckFromStore(),
|
isHeavyTruck: this.getIsVehicleHeavyTruckServiceableFromStore(),
|
||||||
isCarIdDifferent: false,
|
isCarIdDifferent: false,
|
||||||
customAlertData: {},
|
customAlertData: {},
|
||||||
previouslyEnteredCarId: "",
|
previouslyEnteredCarId: "",
|
||||||
|
|
@ -219,7 +209,6 @@ export default {
|
||||||
displayVinNotFoundAlert: false,
|
displayVinNotFoundAlert: false,
|
||||||
displayMatchedDifferentVehicleAlert: false,
|
displayMatchedDifferentVehicleAlert: false,
|
||||||
displayVinScanFailedAlert: false,
|
displayVinScanFailedAlert: false,
|
||||||
displayNoServiceAlert: false,
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
@ -235,12 +224,6 @@ export default {
|
||||||
getZipFromStore() {
|
getZipFromStore() {
|
||||||
return this.$store.getters.order.serviceLocation.zipCode;
|
return this.$store.getters.order.serviceLocation.zipCode;
|
||||||
},
|
},
|
||||||
getCarIdfromStore() {
|
|
||||||
return store.getters.vehicle.carId;
|
|
||||||
},
|
|
||||||
getIsVehicleHeavyTruckFromStore() {
|
|
||||||
return store.getters.isHeavyTruckVehicle;
|
|
||||||
},
|
|
||||||
attachCustomEvents() {
|
attachCustomEvents() {
|
||||||
this.prependActionToMethod(this, this.forwardButtonAction, () => {
|
this.prependActionToMethod(this, this.forwardButtonAction, () => {
|
||||||
this.pushEventToGA(
|
this.pushEventToGA(
|
||||||
|
|
@ -264,6 +247,9 @@ export default {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
getIsVehicleHeavyTruckServiceableFromStore() {
|
||||||
|
return store.getters.vehicle.isBigTruck && store.getters.vehicle.canSafeliteService;
|
||||||
|
},
|
||||||
async findClosestApplicableShops() {
|
async findClosestApplicableShops() {
|
||||||
return await this.dispatchStoreActionWithLogging(
|
return await this.dispatchStoreActionWithLogging(
|
||||||
storeActions.GET_CLOSEST_APPLICABLE_SHOPS,
|
storeActions.GET_CLOSEST_APPLICABLE_SHOPS,
|
||||||
|
|
@ -303,18 +289,6 @@ export default {
|
||||||
return this.$refs.navbar.removeLoader();
|
return this.$refs.navbar.removeLoader();
|
||||||
}
|
}
|
||||||
this.displayInvalidZipAlert = false;
|
this.displayInvalidZipAlert = false;
|
||||||
if (this.isHeavyTruck) {
|
|
||||||
// If a VIN has already been found. Validate the Service Zip (in case of changes)
|
|
||||||
var closestShops = await this.findClosestApplicableShops(
|
|
||||||
this.serviceZipCode,
|
|
||||||
this.carId
|
|
||||||
);
|
|
||||||
this.displayNoServiceAlert = !closestShops?.data?.providers?.length;
|
|
||||||
if (this.displayNoServiceAlert) {
|
|
||||||
return this.$refs.navbar.removeLoader();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// If either lookup fails, remove the loader and stop processing the page.
|
// If either lookup fails, remove the loader and stop processing the page.
|
||||||
if (!resultMap.vehicleLookupResponse || !resultMap.zipCodeData.isServiceable) {
|
if (!resultMap.vehicleLookupResponse || !resultMap.zipCodeData.isServiceable) {
|
||||||
// If the vehicle result is undefined, the vin entered was invalid.
|
// If the vehicle result is undefined, the vin entered was invalid.
|
||||||
|
|
@ -366,6 +340,18 @@ export default {
|
||||||
},
|
},
|
||||||
false
|
false
|
||||||
);
|
);
|
||||||
|
if (this.isHeavyTruck) {
|
||||||
|
closestShops = await this.findClosestApplicableShops(
|
||||||
|
this.serviceZipCode,
|
||||||
|
this.carId
|
||||||
|
);
|
||||||
|
this.displayNoServiceAlert = !closestShops?.data?.providers?.length;
|
||||||
|
if (this.displayNoServiceAlert) {
|
||||||
|
return this.$refs.navbar.removeLoader();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// if no value due to field being optional, blank both phone and email address
|
||||||
|
|
||||||
// if no value due to field being optional, blank both phone and email address
|
// if no value due to field being optional, blank both phone and email address
|
||||||
if (!this.emailOrSms) {
|
if (!this.emailOrSms) {
|
||||||
|
|
@ -430,16 +416,6 @@ export default {
|
||||||
false
|
false
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
closestShops = await this.findClosestApplicableShops(
|
|
||||||
this.serviceZipCode,
|
|
||||||
this.carId
|
|
||||||
);
|
|
||||||
this.displayNoServiceAlert = !closestShops?.data?.providers?.length;
|
|
||||||
if (this.displayNoServiceAlert) {
|
|
||||||
return this.$refs.navbar.removeLoader();
|
|
||||||
}
|
|
||||||
|
|
||||||
// if no value due to field being optional, blank both phone and email address
|
// if no value due to field being optional, blank both phone and email address
|
||||||
if (!this.emailOrSms) {
|
if (!this.emailOrSms) {
|
||||||
await this.dispatchStoreAction(storeActions.SAVE_PHONE_NUMBER, "", false);
|
await this.dispatchStoreAction(storeActions.SAVE_PHONE_NUMBER, "", false);
|
||||||
|
|
@ -523,6 +499,7 @@ export default {
|
||||||
this.displayVinNotFoundAlert = false;
|
this.displayVinNotFoundAlert = false;
|
||||||
this.displayVinScanFailedAlert = false;
|
this.displayVinScanFailedAlert = false;
|
||||||
this.displayNoServiceAlert = false;
|
this.displayNoServiceAlert = false;
|
||||||
|
this.displayNoServiceAlert = false;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
@ -599,7 +576,6 @@ export default {
|
||||||
},
|
},
|
||||||
serviceZipCode() {
|
serviceZipCode() {
|
||||||
this.displayNonServiceableZipAlert = false;
|
this.displayNonServiceableZipAlert = false;
|
||||||
this.displayNoServiceAlert = false;
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue