Merge branch 'develop' into feature/CASH-488
This commit is contained in:
scottkiener-at-safelite
GitHub
commit
e22d664ddf
43 changed files with 1788 additions and 1289 deletions
|
|
@ -35,7 +35,7 @@ module.exports = {
|
|||
testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
|
||||
coverageThreshold: {
|
||||
global: {
|
||||
statements: 74,
|
||||
statements: 72,
|
||||
},
|
||||
},
|
||||
// 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 |
|
|
@ -3,6 +3,7 @@ const experimentUniverses = {
|
|||
RECAL_PRICE_REMOVAL: "NextGen_RecalPriceRemoval",
|
||||
MSR: "MSR",
|
||||
IGQ_SkipQuote: "NextGen_IGQSkipToInsurance",
|
||||
AFTERPAY_BREAKOUT_DISPLAY: "AfterpayBreakoutDisplay",
|
||||
};
|
||||
|
||||
const experimentSettings = {
|
||||
|
|
@ -24,6 +25,7 @@ const experimentSettings = {
|
|||
PRICING_BY_DAY: "DisplayPricingByDay",
|
||||
FOSTER_LOVE: "DisplayFosterLove",
|
||||
SKIP_TO_INSURANCE: "SkipToInsurance",
|
||||
DISPLAY_AFTERPAY_BREAKOUT_DISPLAY: "Display_AfterpayBreakoutDisplay",
|
||||
};
|
||||
|
||||
const experimentTriggers = {
|
||||
|
|
|
|||
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>
|
||||
<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">
|
||||
<legend class="sr-only">Select a day and time</legend>
|
||||
<div
|
||||
|
|
@ -60,18 +62,24 @@
|
|||
date.dateNum === 1 ? 'first-day-' + month.startDateDayIndex : '',
|
||||
date.dayClasses,
|
||||
date.isSelectable ? 'selectable-day' : '',
|
||||
date.isPricingByDayUpchargeDay ? 'upch-day' : '',
|
||||
]">
|
||||
<input
|
||||
:disabled="!date.isSelectable"
|
||||
type="radio"
|
||||
name="day-of-month"
|
||||
v-model="selectedDate"
|
||||
@click="fireDateSelectedEvent"
|
||||
@keypress.enter="fireDateSelectedEvent"
|
||||
@click="fireDateSelectedEvent($event, date)"
|
||||
@keypress.enter="fireDateSelectedEvent($event, date)"
|
||||
:value="date.inputValue"
|
||||
:id="`${month.monthLabel}-${date.dateNum.toString()}`" />
|
||||
<label :for="`${month.monthLabel}-${date.dateNum.toString()}`">
|
||||
<span>{{ date.dateNum.toString() }}</span>
|
||||
<span
|
||||
v-if="isPricingByDayExperiment && showPricingByDay && date.isSelectable"
|
||||
class="price">
|
||||
{{ date.priceString }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -99,8 +107,17 @@
|
|||
// Supporting files
|
||||
import loader from "@/ux-components/loader/loader";
|
||||
import store from "@/store";
|
||||
import { TIMINGFUNC_MAP, BUFFER_OFFSET, MONTHS_OF_YEAR } from "./mixins/constants";
|
||||
import { selectableDaysOptions, requiredParameter, forceTwoDigitString } from "./mixins/helpers";
|
||||
import {
|
||||
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 {
|
||||
convertDateToDateString,
|
||||
convertDateStringToDate,
|
||||
|
|
@ -148,6 +165,10 @@ export default {
|
|||
type: String,
|
||||
default: "",
|
||||
},
|
||||
showPricingByDay: Boolean,
|
||||
pricingByDayBasePrice: Number,
|
||||
pricingByDayUpcharge: Number,
|
||||
isPricingByDayExperiment: Boolean,
|
||||
},
|
||||
setup(props) {
|
||||
const uuid = uuidv4();
|
||||
|
|
@ -199,6 +220,12 @@ export default {
|
|||
if (this.selectableDatesSetting === "custom") return "future";
|
||||
return "past";
|
||||
},
|
||||
isPricingByDayClass() {
|
||||
return this.isPricingByDayExperiment ? "pricing-by-day" : "";
|
||||
},
|
||||
showPricingByDayClass() {
|
||||
return this.showPricingByDay ? "show-pricing-by-day" : "";
|
||||
},
|
||||
selectedDate: {
|
||||
get() {
|
||||
return this.modelValue;
|
||||
|
|
@ -212,12 +239,12 @@ export default {
|
|||
initializeComponent(initialData) {
|
||||
this.setCalendarData(initialData);
|
||||
},
|
||||
fireDateSelectedEvent(event) {
|
||||
fireDateSelectedEvent(event, date) {
|
||||
// Ignore if arrow key selected radioButton
|
||||
if (event.screenX === 0 && event.screenY === 0) {
|
||||
return;
|
||||
}
|
||||
this.$emit("date-clicked");
|
||||
this.$emit("date-clicked", date);
|
||||
},
|
||||
getWeekStartDate(dateString) {
|
||||
const date = convertDateStringToDate(dateString);
|
||||
|
|
@ -440,6 +467,8 @@ export default {
|
|||
initialViewEndDate: config.initialViewEndDate,
|
||||
hideSecondMonth: hideSecondMonth,
|
||||
preSelectedDate: config.preSelectedDate,
|
||||
pricingByDayBasePrice: config.pricingByDayBasePrice,
|
||||
pricingByDayUpcharge: config.pricingByDayUpcharge,
|
||||
};
|
||||
if (direction === "future") {
|
||||
// first 0, then 1
|
||||
|
|
@ -573,6 +602,17 @@ export default {
|
|||
("0" + monthNum).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) {
|
||||
dayClasses += " current-day";
|
||||
|
|
@ -583,8 +623,8 @@ export default {
|
|||
if (offset === 0 && i > this.todayDateNum && calendarViewDirection === "past") {
|
||||
dayClasses += " unavailable-day";
|
||||
}
|
||||
if (convertDateStringToDate(dateString).getDay() === 0) {
|
||||
dayClasses += " sunday";
|
||||
if (dayIndex === 0) {
|
||||
dayClasses += " " + dayObject.cssClass;
|
||||
}
|
||||
if (
|
||||
this.hideSomeDaysForInitialView &&
|
||||
|
|
@ -598,10 +638,9 @@ export default {
|
|||
dateNum: i,
|
||||
dayClasses: dayClasses,
|
||||
inputValue: dateString,
|
||||
isSelectable:
|
||||
this.selectableDatesData.findIndex((date) => date.date === dateString) > -1
|
||||
? true
|
||||
: false,
|
||||
priceString: priceString,
|
||||
isSelectable: isSelectable,
|
||||
isPricingByDayUpchargeDay: isPricingByDayUpchargeDay,
|
||||
};
|
||||
dates.push(dateObject);
|
||||
}
|
||||
|
|
@ -897,7 +936,6 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:checked {
|
||||
@include media-breakpoint-up(sm) {
|
||||
box-shadow: 0 0 0 4px transparent;
|
||||
|
|
@ -924,9 +962,7 @@ export default {
|
|||
|
||||
&.selectable-day {
|
||||
label {
|
||||
color: $blue;
|
||||
background-color: $blue-100;
|
||||
border: 1px solid $blue;
|
||||
min-width: 2.5rem;
|
||||
width: 2.5rem;
|
||||
border-radius: 50%;
|
||||
|
|
@ -934,12 +970,11 @@ export default {
|
|||
}
|
||||
&.unavailable-day {
|
||||
label {
|
||||
color: $gray-500;
|
||||
background-color: $gray-100;
|
||||
border: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
//NEEDED?
|
||||
&.unavailable-day:not(&.sunday) {
|
||||
label {
|
||||
&::before {
|
||||
|
|
@ -949,7 +984,6 @@ export default {
|
|||
left: -1rem;
|
||||
width: 1rem;
|
||||
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 {
|
||||
display: block;
|
||||
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,57 @@
|
|||
<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 = () => {
|
||||
switch (process.env.VUE_APP_CURRENT_ENVIRONMENT) {
|
||||
case "Prod":
|
||||
initializeSalesforceWebchatForProd();
|
||||
break;
|
||||
case "QA":
|
||||
case "SysTest":
|
||||
initializeSalesforceWebchatForQa();
|
||||
break;
|
||||
case "Dev":
|
||||
case "Localhost":
|
||||
initializeSalesforceWebchatForDev();
|
||||
break;
|
||||
}
|
||||
};
|
||||
document.body.appendChild(script);
|
||||
},
|
||||
methods: {},
|
||||
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
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="donation-block">
|
||||
<form ref="donationForm" id="donation-form" @submit.prevent="handleDonationAction">
|
||||
<form ref="donationForm" id="donation-form" @submit.prevent>
|
||||
<div class="row g-0">
|
||||
<div class="col-12">
|
||||
<p class="headline text-center" v-html="DonationHeadline"></p>
|
||||
|
|
@ -52,9 +52,12 @@
|
|||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<button
|
||||
class="btn btn-secondary w-100 mb-2"
|
||||
v-html="DonationAddButtonCopy"></button>
|
||||
<buttonMain
|
||||
ref="buttonMain"
|
||||
:buttonText="DonationAddButtonCopy"
|
||||
loaderColor="blue"
|
||||
class="w-100 mb-2 custom-secondary"
|
||||
@click-event="handleDonationAction" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -86,6 +89,7 @@
|
|||
<script>
|
||||
import textLink from "@/ux-components/text-link/text-link";
|
||||
import alert from "@/ux-components/alert/alert";
|
||||
import buttonMain from "@/ux-components/button-main/button-main";
|
||||
export default {
|
||||
name: "donationBlock",
|
||||
props: {
|
||||
|
|
@ -131,13 +135,20 @@ export default {
|
|||
},
|
||||
},
|
||||
methods: {
|
||||
handleDonationAction(submitEvent) {
|
||||
this.selectedValue = submitEvent.target.elements.amount.value;
|
||||
handleDonationAction() {
|
||||
const selectedAmount = this.$refs.donationForm.elements.amount?.value;
|
||||
if (selectedAmount) {
|
||||
this.selectedValue = selectedAmount;
|
||||
}
|
||||
},
|
||||
removeLoader() {
|
||||
this.$refs.buttonMain.removeLoader();
|
||||
},
|
||||
},
|
||||
components: {
|
||||
textLink,
|
||||
alert,
|
||||
buttonMain,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -280,5 +291,12 @@ export default {
|
|||
left: -0.25rem;
|
||||
}
|
||||
}
|
||||
.custom-secondary {
|
||||
&:hover {
|
||||
color: $blue;
|
||||
background: transparent;
|
||||
border: 1px solid $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
476
src/experiment-components/service-package-radio-for-afterpay.vue
Normal file
476
src/experiment-components/service-package-radio-for-afterpay.vue
Normal file
|
|
@ -0,0 +1,476 @@
|
|||
<template>
|
||||
<baseInputButton v-bind="$props" @buttonClicked="handleAnswerChange" v-model="selectedValue">
|
||||
<div
|
||||
class="package-label"
|
||||
:class="[
|
||||
this.buttonLabelSubCopy ? 'has-subheader' : '',
|
||||
this.additionalButtonData.isInsuranceSelected ? 'is-insurance' : '',
|
||||
this.hasPackageDiscount() ? 'has-package-discount' : '',
|
||||
]"
|
||||
for="testradio">
|
||||
<div class="package-specs">
|
||||
<div>
|
||||
<p class="m-0">
|
||||
<span v-html="this.buttonLabel"></span>
|
||||
</p>
|
||||
<p
|
||||
class="sub-label m-0"
|
||||
v-if="this.buttonLabelSubCopy"
|
||||
v-html="this.buttonLabelSubCopy"></p>
|
||||
</div>
|
||||
<div class="hide-when-closed">
|
||||
<!-- Parse the body text containing <ul> with logic -->
|
||||
<ul>
|
||||
<li v-for="listItem in this.arrayOfListItemsFromBodyText" :key="listItem">
|
||||
<!-- no textLink -->
|
||||
<span
|
||||
v-if="!doesCopyContainTextLink(listItem)"
|
||||
v-html="listItem"></span>
|
||||
<!-- with textLink -->
|
||||
<template
|
||||
v-else
|
||||
v-for="copy in splitCopyOnCMSPlaceHolder(listItem)"
|
||||
:key="copy">
|
||||
<span v-if="!doesCopyContainTextLink(copy)" v-html="copy"></span>
|
||||
<span v-else>
|
||||
<textLink
|
||||
linkType="text"
|
||||
:text="getRouterLinkDisplayTextFromCopy(copy)"
|
||||
href="#!"
|
||||
@click-event="
|
||||
$emit('buttonEvent', {
|
||||
eventName: 'openModal',
|
||||
args: getRouterLinkRouteFromCopy(copy),
|
||||
})
|
||||
"
|
||||
:data-bs-target="'#' + getRouterLinkRouteFromCopy(copy)" />
|
||||
</span>
|
||||
</template>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- End of body text parsing -->
|
||||
<div
|
||||
class="package-footer fw-bold caption ms-n4 mt-4"
|
||||
v-if="this.buttonFooterCopy"
|
||||
v-html="this.buttonFooterCopy"></div>
|
||||
</div>
|
||||
|
||||
<div v-if="hasPackageDiscount()" class="special-save-box">
|
||||
<span v-html="this.additionalButtonData.Text"></span>
|
||||
</div>
|
||||
<span class="pricing-info">
|
||||
<div
|
||||
class="insurance-pricing"
|
||||
v-if="this.additionalButtonData.isInsuranceSelected">
|
||||
<span
|
||||
class="strikethrough-price"
|
||||
v-if="shouldDisplayStrikeThroughPrice"
|
||||
v-html="this.additionalButtonData.strikeThroughPrice"></span>
|
||||
<span v-html="this.buttonAuxillaryCopy"></span>
|
||||
</div>
|
||||
<div v-else>
|
||||
<span v-html="afterpayPrice()"></span>
|
||||
<span class="afterpay-breakout">
|
||||
<span>in 4 interest-free payments</span>
|
||||
<div>
|
||||
or
|
||||
<span v-html="truncatedSinglePayment()"></span>
|
||||
<span
|
||||
class="strikethrough-price"
|
||||
v-if="shouldDisplayStrikeThroughPrice"
|
||||
v-html="this.additionalButtonData.strikeThroughPrice"></span>
|
||||
in single payment
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</baseInputButton>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import baseInputButton from "@/digital-components/base-input-button/base-input-button";
|
||||
import textLink from "@/ux-components/text-link/text-link";
|
||||
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
|
||||
import {
|
||||
getRouterLinkDisplayTextFromCopy,
|
||||
getRouterLinkRouteFromCopy,
|
||||
splitCopyOnCMSPlaceHolder,
|
||||
doesCopyContainTextLink,
|
||||
} from "@/helpers/cms-content-helper";
|
||||
|
||||
export default {
|
||||
name: "servicePackageRadio",
|
||||
mixins: [inputButtonWrapperMixin],
|
||||
components: {
|
||||
baseInputButton,
|
||||
textLink,
|
||||
},
|
||||
computed: {
|
||||
arrayOfListItemsFromBodyText() {
|
||||
return this.getArrayOfListItemsFromRawCmsCopy(this.buttonBodyCopy);
|
||||
},
|
||||
shouldDisplayStrikeThroughPrice() {
|
||||
const displayPrice = this.buttonAuxillaryCopy.substring(
|
||||
this.buttonAuxillaryCopy.indexOf("$")
|
||||
);
|
||||
return displayPrice != this.additionalButtonData.strikeThroughPrice;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getRouterLinkDisplayTextFromCopy,
|
||||
getRouterLinkRouteFromCopy,
|
||||
splitCopyOnCMSPlaceHolder,
|
||||
doesCopyContainTextLink,
|
||||
stripUlTagFromCopy(copy) {
|
||||
const regex = /(?:<ul(?:.*?)>)|(?:<\/ul>)/g;
|
||||
return copy.replace(regex, "");
|
||||
},
|
||||
getArrayOfListItemsFromRawCmsCopy(copy) {
|
||||
const withoutUlTags = this.stripUlTagFromCopy(copy);
|
||||
return withoutUlTags
|
||||
.split(/(?:<li(?:.*?)>)|(?:<\/li>)/g)
|
||||
.filter((lineItem) => lineItem);
|
||||
},
|
||||
afterpayPrice() {
|
||||
const decimalPrice = parseFloat(this.buttonAuxillaryCopy.replace("$", ""));
|
||||
return "$" + (decimalPrice / 4).toFixed(2);
|
||||
},
|
||||
truncatedSinglePayment() {
|
||||
return "$" + Math.trunc(this.buttonAuxillaryCopy.replace("$", ""));
|
||||
},
|
||||
hasPackageDiscount() {
|
||||
return (
|
||||
this.additionalButtonData.servicePackageDiscount && this.additionalButtonData.Text
|
||||
);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.package-main {
|
||||
.package-wrapper {
|
||||
margin: 1rem 0;
|
||||
&:first-child {
|
||||
margin: 1rem 0 0 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin: 1rem 0 0 0;
|
||||
}
|
||||
@include media-breakpoint-up(md) {
|
||||
margin: 1rem 0.5rem 0 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&:first-child {
|
||||
margin: 1rem 0.5rem 0 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin: 1rem 0 0 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
@include media-breakpoint-up(md) {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
|
||||
+ .package-label {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid $gray-300;
|
||||
box-shadow:
|
||||
0px 4px 8px -4px rgba(0, 0, 0, 0.15),
|
||||
0px 4px 24px -8px rgba(0, 0, 0, 0.2);
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
min-height: 52px;
|
||||
max-height: 126px;
|
||||
@include media-breakpoint-up(md) {
|
||||
max-height: 500px;
|
||||
padding-bottom: 4.75rem;
|
||||
}
|
||||
@include media-breakpoint-down(md) {
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
transition: max-height 0.25s ease-in;
|
||||
|
||||
&.is-insurance {
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
|
||||
&.has-subheader {
|
||||
& > .package-specs {
|
||||
& > div:first-of-type {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.has-package-discount {
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: relative;
|
||||
top: 5px;
|
||||
margin-right: 0.5rem;
|
||||
border-radius: 50%;
|
||||
border: 1px solid $gray-500;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
min-width: 16px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 20px;
|
||||
border-radius: 50%;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
min-width: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
+ .package-label {
|
||||
&:before {
|
||||
border: 1px solid #8e9292;
|
||||
box-shadow:
|
||||
0px 0px 0px 4px #9fcee6,
|
||||
0px 1px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
+ .package-label {
|
||||
.package-specs {
|
||||
max-height: 1000px;
|
||||
|
||||
.sub-label {
|
||||
background-color: $green-200;
|
||||
}
|
||||
}
|
||||
}
|
||||
+ .package-label {
|
||||
.package-specs {
|
||||
.hide-when-closed {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
+ .package-label {
|
||||
background-color: $blue-100;
|
||||
border: 1px solid $blue;
|
||||
max-height: 500px;
|
||||
.special-save-box {
|
||||
background-color: $green-200;
|
||||
}
|
||||
}
|
||||
+ .package-label {
|
||||
&:before {
|
||||
box-shadow: 0px 0px 0px 1px $blue;
|
||||
}
|
||||
}
|
||||
+ .package-label {
|
||||
&:after {
|
||||
background: $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
+ .package-label {
|
||||
&:before {
|
||||
border: 2px solid $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.package-footer {
|
||||
color: $red;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.package-specs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
transition: all 0.5s ease;
|
||||
@include media-breakpoint-up(md) {
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
.row {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
|
||||
&.sub-label {
|
||||
color: $green;
|
||||
background-color: $green-100;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.75rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
span {
|
||||
&.service-package-discount {
|
||||
color: $green;
|
||||
text-align: end;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
align-self: flex-start;
|
||||
div.strikethrough-discount-price {
|
||||
text-decoration: line-through;
|
||||
margin-right: 0.5rem;
|
||||
font-weight: 400;
|
||||
font-size: 0.75rem;
|
||||
line-height: 20px;
|
||||
color: $gray-550;
|
||||
@include media-breakpoint-up(md) {
|
||||
margin-right: 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
div.discount-price {
|
||||
color: $green;
|
||||
}
|
||||
@include media-breakpoint-up(md) {
|
||||
position: absolute;
|
||||
bottom: 0.75rem;
|
||||
left: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
ul {
|
||||
margin: 1rem 0 0 -5px;
|
||||
padding: 0;
|
||||
li {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.714;
|
||||
color: $gray-550;
|
||||
a {
|
||||
line-height: 1.714;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideaway {
|
||||
from {
|
||||
display: block;
|
||||
}
|
||||
to {
|
||||
transform: translateY(40px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.hide-when-closed {
|
||||
display: none;
|
||||
@include media-breakpoint-up(md) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
.discount-text {
|
||||
height: 2rem;
|
||||
display: flex;
|
||||
border-top-right-radius: 0.5rem;
|
||||
border-top-left-radius: 0.5rem;
|
||||
background-color: $green;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
color: white;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.75px;
|
||||
}
|
||||
.special-save-box {
|
||||
background-color: $green-100;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 0.5rem auto 1rem -1.25rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.25rem;
|
||||
span {
|
||||
color: $green;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.pricing-info {
|
||||
color: $green;
|
||||
position: absolute;
|
||||
bottom: 0.75rem;
|
||||
left: 0;
|
||||
width: calc(100% - 1.25rem);
|
||||
margin-left: 1.25rem;
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
|
||||
span.strikethrough-price {
|
||||
text-decoration: line-through;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 400;
|
||||
color: $gray-550;
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
span.afterpay-breakout {
|
||||
color: $gray-550;
|
||||
font-weight: initial;
|
||||
font-size: 0.875rem;
|
||||
|
||||
& > span {
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
& > div {
|
||||
font-size: 0.625rem;
|
||||
|
||||
& > span:first-of-type {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -32,17 +32,13 @@
|
|||
linkType="navigation"
|
||||
text="Cookie preferences"
|
||||
href="javascript:OneTrust.ToggleInfoDisplay();" />
|
||||
<textLink
|
||||
linkType="newWindowLink"
|
||||
text="Warranty"
|
||||
href="//www.safelite.com/national-lifetime-warranty"
|
||||
target="_blank" />
|
||||
<textLink
|
||||
linkType="newWindowLink"
|
||||
text="Notice at collection"
|
||||
href="https://www.safelite.com/ccpa-privacy-policy"
|
||||
target="_blank" />
|
||||
</div>
|
||||
<p class="mx-3 my-0 pb-1">© 2025 Safelite Group</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -64,8 +60,9 @@ export default {
|
|||
flex-direction: column;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
align-items: end;
|
||||
align-items: center;
|
||||
margin-top: auto;
|
||||
padding: 0 0 2rem 0;
|
||||
|
||||
.skyline {
|
||||
height: 96px;
|
||||
|
|
@ -74,22 +71,34 @@ export default {
|
|||
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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-top: 1px solid $gray;
|
||||
padding: 2rem 0;
|
||||
padding: 2rem 0 0 0;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: $gray-600;
|
||||
|
||||
:deep(a) {
|
||||
text-decoration: none;
|
||||
&.new-window-link {
|
||||
margin: 0 0.75rem;
|
||||
color: $gray-600;
|
||||
}
|
||||
&.navigation-link {
|
||||
margin: 0 0.75rem;
|
||||
color: $gray-600;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,10 +2,12 @@
|
|||
<div
|
||||
class="funnel-header d-flex justify-content-center align-items-center flex-column"
|
||||
v-if="imageSrc">
|
||||
<salesforceWebchat hideSalesforceWebchatLaunchButton />
|
||||
<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. -->
|
||||
<menuModal />
|
||||
<!-- // 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>
|
||||
<template v-for="globalAlert in globalAlertMessages" :key="globalAlert.id">
|
||||
<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 { globalEvents } from "@/constants/events";
|
||||
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
|
||||
const ALERT_DURATION = 3000; // millisecond time to display alert before dismissal
|
||||
|
|
@ -39,6 +43,10 @@ export default {
|
|||
},
|
||||
props: {
|
||||
cmsWidgetName: String,
|
||||
hideSalesforceWebchatLaunchButton: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
imageSrc() {
|
||||
|
|
@ -62,6 +70,8 @@ export default {
|
|||
components: {
|
||||
alert,
|
||||
menuModal,
|
||||
progressBar,
|
||||
salesforceWebchat,
|
||||
},
|
||||
mounted() {
|
||||
// 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>
|
||||
|
|
@ -72,6 +72,7 @@ export class Logger {
|
|||
applicationConfig.CONSUMER_CF_DISTRO + applicationConfig.FRONTEND_LOGGER_PATH;
|
||||
const headers = {
|
||||
[headerKeys.EXPERIMENT]: JSON.stringify(store.getters.experimentSettings),
|
||||
[headerKeys.APPLICATION_NAME]: applicationConfig.APPLICATION_NAME,
|
||||
};
|
||||
|
||||
axios({
|
||||
|
|
|
|||
|
|
@ -164,6 +164,8 @@ export default {
|
|||
emailOrSms: this.getEmailOrSmsFromStore(),
|
||||
},
|
||||
serviceZipCode: this.getServiceZipFromStore(),
|
||||
carId: this.getCarIdfromStore(),
|
||||
isHeavyTruck: this.getIsVehicleHeavyTruckServiceableFromStore(),
|
||||
displayNonServiceableZipAlert: false,
|
||||
displayVinNotFoundAlert: false,
|
||||
displayMatchedDifferentVehicleAlert: false,
|
||||
|
|
@ -219,6 +221,19 @@ export default {
|
|||
getServiceZipFromStore() {
|
||||
return this.$store.getters.order.serviceLocation.zipCode;
|
||||
},
|
||||
getCarIdfromStore() {
|
||||
return store.getters.vehicle.carId;
|
||||
},
|
||||
getIsVehicleHeavyTruckServiceableFromStore() {
|
||||
return store.getters.vehicle.isBigTruck && store.getters.vehicle.canSafeliteService;
|
||||
},
|
||||
async findClosestApplicableShops() {
|
||||
return await this.dispatchStoreActionWithLogging(
|
||||
storeActions.GET_CLOSEST_APPLICABLE_SHOPS,
|
||||
{ zip: this.serviceZipCode, carId: this.carId },
|
||||
"address-lookup"
|
||||
);
|
||||
},
|
||||
async forwardButtonAction() {
|
||||
this.resetWarningsAndErrors();
|
||||
|
||||
|
|
@ -278,7 +293,6 @@ export default {
|
|||
return this.$refs.navbar.removeLoader();
|
||||
}
|
||||
this.displayInvalidZipAlert = false;
|
||||
|
||||
const carsFound = resultMap.vinLookupResponse.vinVehicles;
|
||||
|
||||
// Handle cases for different amounts of VINS found for the address.
|
||||
|
|
|
|||
|
|
@ -5,7 +5,10 @@
|
|||
<div class="container-fluid pb-2">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6">
|
||||
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
|
||||
<funnelHeader
|
||||
cmsWidgetName="FunnelHeaderWidget"
|
||||
ref="funnelHeader"
|
||||
hideSalesforceWebchatLaunchButton />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
|
|
@ -72,7 +75,8 @@
|
|||
:donationValues="donationValues"
|
||||
:showDonationSuccess="showDonationSuccess"
|
||||
:showDonationError="showDonationError"
|
||||
@DonationAddedEvent="addDonationToOrder" />
|
||||
@DonationAddedEvent="addDonationToOrder"
|
||||
ref="donationBlock" />
|
||||
</div>
|
||||
|
||||
<hr class="mb-5" />
|
||||
|
|
@ -544,10 +548,12 @@ export default {
|
|||
false
|
||||
);
|
||||
this.lineItems = deepClone(this.getSubmittedOrder().lineItems);
|
||||
this.$refs.donationBlock.removeLoader();
|
||||
} else {
|
||||
this.showDonationError = true;
|
||||
this.showDonationSuccess = false;
|
||||
this.donationAmount = 0;
|
||||
this.$refs.donationBlock.removeLoader();
|
||||
}
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -56,7 +56,10 @@
|
|||
@back-clicked="backButtonAction"
|
||||
@ForwardClicked="forwardButtonAction" />
|
||||
|
||||
<textBlock cmsWidgetName="DisclaimerCopyWidget" typeStyle="caption" />
|
||||
<textBlock
|
||||
class="mb-5"
|
||||
cmsWidgetName="DisclaimerCopyWidget"
|
||||
typeStyle="caption" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -53,11 +53,33 @@ import { Form, defineRule } from "vee-validate";
|
|||
import baseMixin from "@/mixins/base-mixin.js";
|
||||
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
|
||||
import { applicationConfig } from "@/constants/application-config";
|
||||
import experimentMixin from "@/mixins/experiment-mixin.js";
|
||||
import { experimentSettings } from "@/constants/experiments";
|
||||
import { partNumberStrings } from "@/constants/part-number-strings";
|
||||
import { deepClone } from "@/helpers/object-helper";
|
||||
import store from "@/store";
|
||||
|
||||
export default {
|
||||
name: "insurance-company",
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
// Remove any Pricing By Day lineItems before going to Heritage insurance
|
||||
const isPricingByDayExperiment = experimentMixin.methods.hasSettingEqualTo(
|
||||
experimentSettings.PRICING_BY_DAY,
|
||||
"true"
|
||||
);
|
||||
if (isPricingByDayExperiment) {
|
||||
const lineItems = deepClone(store.getters.order.lineItems);
|
||||
const supportingItemsWithoutPricingByDay =
|
||||
baseMixin.methods.filterOutCertainPartTypesOrNumbers(lineItems.supportingItems, {
|
||||
partNumbersToRemove: [partNumberStrings.PRICING_BY_DAY_UPCHARGE],
|
||||
});
|
||||
baseMixin.methods.dispatchStoreAction(
|
||||
storeActions.SAVE_SUPPORTING_ITEMS_SUPPRESSING_STATE_RESETTING,
|
||||
supportingItemsWithoutPricingByDay,
|
||||
false
|
||||
);
|
||||
}
|
||||
|
||||
// Call APIs
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
|
||||
const insuranceCompanyListPromise = baseMixin.methods.dispatchStoreActionWithLogging(
|
||||
|
|
@ -181,3 +203,9 @@ export default {
|
|||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.ui-autocomplete {
|
||||
z-index: 3;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -716,6 +716,5 @@ function setupMocks({
|
|||
wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => "");
|
||||
wrapper.vm.$refs.navbar.updateButtonText = jest.fn();
|
||||
wrapper.vm.$refs.navbar.removeLoader = jest.fn();
|
||||
|
||||
return { wrapper, apiPromise };
|
||||
}
|
||||
|
|
|
|||
|
|
@ -76,13 +76,20 @@
|
|||
:manualCopy="AlertMatchedDifferentVehicleBody"
|
||||
alertClass="alert-warning"
|
||||
v-bind:isDismissible="false" />
|
||||
<alert
|
||||
ref="AlertNoService"
|
||||
v-if="displayNoServiceAlert"
|
||||
class="my-4"
|
||||
cmsWidgetName="AlertNoServiceWidget"
|
||||
alertClass="alert-danger"
|
||||
v-bind:isDismissible="false" />
|
||||
|
||||
<navbar
|
||||
ref="navbar"
|
||||
cmsWidgetName="FunnelFooterWidget"
|
||||
:isForwardActionDisabled="!meta.valid"
|
||||
@back-clicked="backButtonAction"
|
||||
@ForwardClicked="forwardButtonAction" />
|
||||
@ForwardClicked="forwardButtonAction || displayNoServiceAlert" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -158,6 +165,8 @@ export default {
|
|||
registrationZipCode: this.getRegistrationZipFromStore() ?? this.$route.query.zipcode,
|
||||
emailOrSms: this.getEmailOrSmsFromStore(),
|
||||
serviceZipCode: this.getServiceZipFromStore(),
|
||||
carId: this.getCarIdfromStore(),
|
||||
isHeavyTruck: this.getIsVehicleHeavyTruckServiceableFromStore(),
|
||||
displayNonServiceableZipAlert: false,
|
||||
displayVinNotFoundAlert: false,
|
||||
displayMatchedDifferentVehicleAlert: false,
|
||||
|
|
@ -200,6 +209,19 @@ export default {
|
|||
getServiceZipFromStore() {
|
||||
return this.$store.getters.order.serviceLocation.zipCode;
|
||||
},
|
||||
getCarIdfromStore() {
|
||||
return store.getters.vehicle.carId;
|
||||
},
|
||||
getIsVehicleHeavyTruckServiceableFromStore() {
|
||||
return store.getters.vehicle.isBigTruck && store.getters.vehicle.canSafeliteService;
|
||||
},
|
||||
async findClosestApplicableShops() {
|
||||
return await this.dispatchStoreActionWithLogging(
|
||||
storeActions.GET_CLOSEST_APPLICABLE_SHOPS,
|
||||
{ zip: this.serviceZipCode, carId: this.carId },
|
||||
"license-plate-lookup"
|
||||
);
|
||||
},
|
||||
async forwardButtonAction() {
|
||||
this.resetWarningsAndErrors();
|
||||
|
||||
|
|
@ -257,7 +279,6 @@ export default {
|
|||
this.displayInvalidZipAlert = true;
|
||||
return this.$refs.navbar.removeLoader();
|
||||
}
|
||||
|
||||
// Check if the CarId has changed.
|
||||
this.isCarIdDifferent =
|
||||
vinLookup.data.vehicle.carId !== this.$store.getters.vehicle.carId;
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
}),
|
||||
hasSettingEqualTo: jest.fn((settingName) => {
|
||||
if (settingName === experimentSettings.DISPLAY_AFTERPAY_BREAKOUT_DISPLAY) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}),
|
||||
getCmsContent: jest.fn().mockImplementation(() => {
|
||||
return "test text";
|
||||
}),
|
||||
|
|
|
|||
|
|
@ -39,6 +39,10 @@
|
|||
:isExpandedOnLoad="false"
|
||||
:isMSRFeeApplicable="isMSRFeeApplicable" />
|
||||
|
||||
<afterpayBreakout
|
||||
v-if="isAfterpayBreakoutDisplay"
|
||||
cmsWidgetName="AfterpayBreakoutAlertWidget"
|
||||
:totalAmount="totalAmountDue" />
|
||||
<hr />
|
||||
|
||||
<div>
|
||||
|
|
@ -118,6 +122,7 @@ import alert from "@/ux-components/alert/alert";
|
|||
import textBlock from "@/digital-components/text-block/text-block";
|
||||
import checkboxQuestion from "@/digital-components/checkbox-question/checkbox-question";
|
||||
import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal";
|
||||
import afterpayBreakout from "@/layouts/payment-method/afterpay-breakout/afterpay-breakout";
|
||||
|
||||
// Supporting Items
|
||||
import baseMixin from "@/mixins/base-mixin.js";
|
||||
|
|
@ -131,7 +136,6 @@ import {
|
|||
} from "@/helpers/cms-content-helper";
|
||||
import { paymentMethods } from "@/constants/payment-method-constants";
|
||||
import { experimentSettings } from "@/constants/experiments";
|
||||
import experimentMixin from "@/mixins/experiment-mixin.js";
|
||||
import {
|
||||
revalidatePromosAndValidateQueryStringPromo,
|
||||
buildToastMessagesFromRevalidateOrValidatePromoResponse,
|
||||
|
|
@ -805,6 +809,18 @@ export default {
|
|||
lineItemsCloneForWatcher() {
|
||||
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: {
|
||||
customCtaCopy(newValue) {
|
||||
|
|
@ -856,6 +872,7 @@ export default {
|
|||
textBlock,
|
||||
checkboxQuestion,
|
||||
contentGroupModal,
|
||||
afterpayBreakout,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,16 +2,16 @@
|
|||
<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="mx-4 my-0 fw-bold alert-heading text-center">
|
||||
<div
|
||||
class="mx-4 my-0 alert-heading text-center"
|
||||
:class="[isAfterpayBreakoutDisplay ? 'fw-bolder' : 'fw-bold']">
|
||||
<span v-for="token in afterpayCopyTokens" :key="token">
|
||||
<span v-if="isAfterpayPriceToken(token)">{{ afterpayPrice }}</span>
|
||||
<span v-else-if="isInlineImageToken(token)">
|
||||
<img v-if="hasImage" :src="imageUrl" :alt="getInlineAltText(token)" />
|
||||
<span v-else>{{ getInlineAltText(token) }}</span>
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ token }}
|
||||
</span>
|
||||
<span v-else v-html="token"></span>
|
||||
</span>
|
||||
|
||||
<a
|
||||
|
|
@ -52,6 +52,7 @@ export default {
|
|||
props: {
|
||||
cmsWidgetName: String,
|
||||
lineItems: Array,
|
||||
isAfterpayBreakoutDisplay: Boolean,
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
|
|
@ -69,7 +70,16 @@ export default {
|
|||
return !!this.imageUrl;
|
||||
},
|
||||
afterpayCopyTokens() {
|
||||
return splitCopyOnCMSPlaceHolder(this.getCmsContent(this.cmsWidgetName, "HeaderText"));
|
||||
if (this.isAfterpayBreakoutDisplay) {
|
||||
// Text for Afterpay Breakout experiment
|
||||
return splitCopyOnCMSPlaceHolder(
|
||||
this.getCmsContent(this.cmsWidgetName, "BodyText2")
|
||||
);
|
||||
} else {
|
||||
return splitCopyOnCMSPlaceHolder(
|
||||
this.getCmsContent(this.cmsWidgetName, "HeaderText")
|
||||
);
|
||||
}
|
||||
},
|
||||
modalCopy() {
|
||||
return this.getCmsContent(this.cmsWidgetName, "BodyText");
|
||||
|
|
@ -117,6 +127,12 @@ export default {
|
|||
.alert-heading {
|
||||
color: $blue-700;
|
||||
}
|
||||
&.fw-bolder {
|
||||
font-weight: 600;
|
||||
}
|
||||
img {
|
||||
vertical-align: text-top;
|
||||
}
|
||||
svg {
|
||||
fill: $blue-700;
|
||||
width: 1rem;
|
||||
|
|
|
|||
|
|
@ -87,6 +87,12 @@ jest.mock("@/mixins/experiment-mixin.js", () => ({
|
|||
}
|
||||
return "test";
|
||||
},
|
||||
hasSettingEqualTo(settingName) {
|
||||
if (settingName === mockExperimentSettings.DISPLAY_AFTERPAY_BREAKOUT_DISPLAY) {
|
||||
return false;
|
||||
}
|
||||
return "test";
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
|
|
@ -264,6 +270,12 @@ describe("quote.vue", () => {
|
|||
lineItems: {
|
||||
glassParts: ["item", "item2"],
|
||||
},
|
||||
pageData: jest.fn((page) => {
|
||||
if (page === "quote") {
|
||||
return { saveProgressPopupSkipped: true };
|
||||
}
|
||||
return {};
|
||||
}),
|
||||
applicationUser: {
|
||||
experiments: [],
|
||||
},
|
||||
|
|
@ -313,6 +325,12 @@ describe("quote.vue", () => {
|
|||
lineItems: {
|
||||
glassParts: ["item", "item2"],
|
||||
},
|
||||
pageData: jest.fn((page) => {
|
||||
if (page === "quote") {
|
||||
return { saveProgressPopupSkipped: true };
|
||||
}
|
||||
return {};
|
||||
}),
|
||||
applicationUser: {
|
||||
experiments: [],
|
||||
},
|
||||
|
|
@ -360,6 +378,12 @@ describe("quote.vue", () => {
|
|||
lineItems: {
|
||||
glassParts: ["item", "item2"],
|
||||
},
|
||||
pageData: jest.fn((page) => {
|
||||
if (page === "quote") {
|
||||
return { saveProgressPopupSkipped: true };
|
||||
}
|
||||
return {};
|
||||
}),
|
||||
applicationUser: {
|
||||
experiments: [],
|
||||
},
|
||||
|
|
@ -404,6 +428,12 @@ describe("quote.vue", () => {
|
|||
lineItems: {
|
||||
glassParts: ["item", "item2"],
|
||||
},
|
||||
pageData: jest.fn((page) => {
|
||||
if (page === "quote") {
|
||||
return { saveProgressPopupSkipped: true };
|
||||
}
|
||||
return {};
|
||||
}),
|
||||
applicationUser: {
|
||||
experiments: [],
|
||||
},
|
||||
|
|
@ -449,6 +479,12 @@ describe("quote.vue", () => {
|
|||
lineItems: {
|
||||
glassParts: ["item", "item2"],
|
||||
},
|
||||
pageData: jest.fn((page) => {
|
||||
if (page === "quote") {
|
||||
return { saveProgressPopupSkipped: true };
|
||||
}
|
||||
return {};
|
||||
}),
|
||||
applicationUser: {
|
||||
experiments: [],
|
||||
},
|
||||
|
|
@ -494,6 +530,12 @@ describe("quote.vue", () => {
|
|||
lineItems: {
|
||||
glassParts: ["item", "item2"],
|
||||
},
|
||||
pageData: jest.fn((page) => {
|
||||
if (page === "quote") {
|
||||
return { saveProgressPopupSkipped: true };
|
||||
}
|
||||
return {};
|
||||
}),
|
||||
applicationUser: {
|
||||
experiments: [],
|
||||
},
|
||||
|
|
@ -540,6 +582,12 @@ describe("quote.vue", () => {
|
|||
lineItems: {
|
||||
glassParts: ["item", "item2"],
|
||||
},
|
||||
pageData: jest.fn((page) => {
|
||||
if (page === "quote") {
|
||||
return { saveProgressPopupSkipped: true };
|
||||
}
|
||||
return {};
|
||||
}),
|
||||
applicationUser: {
|
||||
experiments: [],
|
||||
},
|
||||
|
|
@ -588,6 +636,12 @@ describe("quote.vue", () => {
|
|||
lineItems: {
|
||||
glassParts: ["item", "item2"],
|
||||
},
|
||||
pageData: jest.fn((page) => {
|
||||
if (page === "quote") {
|
||||
return { saveProgressPopupSkipped: true };
|
||||
}
|
||||
return {};
|
||||
}),
|
||||
applicationUser: {
|
||||
experiments: [],
|
||||
},
|
||||
|
|
@ -634,6 +688,12 @@ describe("quote.vue", () => {
|
|||
lineItems: {
|
||||
glassParts: ["item", "item2"],
|
||||
},
|
||||
pageData: jest.fn((page) => {
|
||||
if (page === "quote") {
|
||||
return { saveProgressPopupSkipped: true };
|
||||
}
|
||||
return {};
|
||||
}),
|
||||
applicationUser: {
|
||||
experiments: [],
|
||||
},
|
||||
|
|
@ -681,6 +741,12 @@ describe("quote.vue", () => {
|
|||
lineItems: {
|
||||
glassParts: ["item", "item2"],
|
||||
},
|
||||
pageData: jest.fn((page) => {
|
||||
if (page === "quote") {
|
||||
return { saveProgressPopupSkipped: true };
|
||||
}
|
||||
return {};
|
||||
}),
|
||||
applicationUser: {
|
||||
experiments: [],
|
||||
},
|
||||
|
|
@ -780,6 +846,12 @@ describe("quote.vue", () => {
|
|||
lineItems: {
|
||||
glassParts: ["item", "item2"],
|
||||
},
|
||||
pageData: jest.fn((page) => {
|
||||
if (page === "quote") {
|
||||
return { saveProgressPopupSkipped: true };
|
||||
}
|
||||
return {};
|
||||
}),
|
||||
applicationUser: {
|
||||
experiments: [],
|
||||
},
|
||||
|
|
|
|||
|
|
@ -46,6 +46,7 @@
|
|||
<afterpayModalBanner
|
||||
v-if="showAfterpayBanner"
|
||||
cmsWidgetName="AfterpayModalWidget"
|
||||
:isAfterpayBreakoutDisplay="isAfterpayBreakoutDisplay"
|
||||
:lineItems="lineItems" />
|
||||
|
||||
<!-- If vehicle requires recal AND we are hiding recal pricing info, then show recal disclaimer banner. -->
|
||||
|
|
@ -166,6 +167,7 @@ import {
|
|||
getDeviceIdValue,
|
||||
} from "@/helpers/heritage-integration/cookie-helper";
|
||||
import { showFmgLoadingModal } from "@/helpers/loading-modal-helper";
|
||||
import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
|
||||
|
||||
defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
|
||||
|
||||
|
|
@ -220,6 +222,36 @@ export default {
|
|||
);
|
||||
}
|
||||
|
||||
// AfterpayBreakoutDisplay Custom Exposure
|
||||
const IGQExperiment = store.getters.applicationUser.experiments.find(
|
||||
(e) => e.universeName === experimentUniverses.RECAL_PRICE_REMOVAL
|
||||
);
|
||||
const hasExposedIGQExperiment = IGQExperiment?.isExposed;
|
||||
|
||||
const afterpayBreakoutDisplayExperiment = store.getters.applicationUser.experiments.find(
|
||||
(e) => e.universeName === experimentUniverses.AFTERPAY_BREAKOUT_DISPLAY
|
||||
);
|
||||
const hasExposedAfterpayBreakoutDisplay = afterpayBreakoutDisplayExperiment?.isExposed;
|
||||
const shouldSendAfterpayBreakoutDisplayExposeRequest =
|
||||
afterpayBreakoutDisplayExperiment &&
|
||||
!hasExposedAfterpayBreakoutDisplay &&
|
||||
!hasExposedIGQExperiment;
|
||||
|
||||
if (shouldSendAfterpayBreakoutDisplayExposeRequest) {
|
||||
baseMixin.methods.dispatchStoreActionWithLogging(
|
||||
storeActions.LOG_EXPERIMENT_EXPOSURE_AND_UPDATE_STORE,
|
||||
{
|
||||
userId: getUserIdValue(),
|
||||
deviceId: getDeviceIdValue(),
|
||||
sessionKey: getSessionKeyValue(),
|
||||
pageName: to.query.fmgPage,
|
||||
experiment: afterpayBreakoutDisplayExperiment,
|
||||
},
|
||||
"quote",
|
||||
false
|
||||
);
|
||||
}
|
||||
|
||||
const promiseResultMap = [
|
||||
{
|
||||
resultKey: "cmsContent",
|
||||
|
|
@ -242,7 +274,9 @@ export default {
|
|||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
const emailFromStore = store.getters.order.customer.emailAddress;
|
||||
const isEmailInStoreOnPageLoad = emailFromStore?.length > 0;
|
||||
const showSaveProgressPopup = isEmailInStoreOnPageLoad ? false : true;
|
||||
const isPopupSkipped =
|
||||
store.getters.pageData(fmgPageValues.QUOTE)?.saveProgressPopupSkipped === true;
|
||||
const showSaveProgressPopup = !(isEmailInStoreOnPageLoad || isPopupSkipped);
|
||||
const showSaveProgressModal = isEmailInStoreOnPageLoad ? false : true;
|
||||
const shouldSkipToInsurance =
|
||||
getBoolFromString(
|
||||
|
|
@ -568,6 +602,15 @@ export default {
|
|||
showRecalDisclaimer() {
|
||||
return this.isRecalibrationOnOrder && this.isRecalPriceRemove;
|
||||
},
|
||||
isAfterpayBreakoutDisplay() {
|
||||
return (
|
||||
(!this.isRecalPriceRemove || !this.isRecalibrationOnOrder) &&
|
||||
experimentMixin.methods.hasSettingEqualTo(
|
||||
experimentSettings.DISPLAY_AFTERPAY_BREAKOUT_DISPLAY,
|
||||
"true"
|
||||
)
|
||||
);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getColCount() {
|
||||
|
|
@ -626,6 +669,15 @@ export default {
|
|||
async closeSaveProgressPopup() {
|
||||
this.showSaveProgressPopup = false;
|
||||
|
||||
await this.dispatchStoreAction(
|
||||
storeActions.SAVE_PAGE_DATA,
|
||||
{
|
||||
page: fmgPageValues.QUOTE,
|
||||
data: { saveProgressPopupSkipped: true },
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
if (this.skipToInsurance) {
|
||||
// skip ahead now if in IGQ skip experiment
|
||||
await this.skip(true, externalParamPackageLabels.GLASS_ONLY);
|
||||
|
|
@ -839,7 +891,7 @@ export default {
|
|||
|
||||
&.funnel-header-wrapper,
|
||||
&.save-progress-popup {
|
||||
display: block;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
:answers="servicePackageAnswers"
|
||||
:groupName="groupName"
|
||||
buttonTypeString="servicePackageRadio"
|
||||
:buttonTypeObject="hasPricingByDay() ? servicePackageRadioExperiment : servicePackageRadio"
|
||||
:buttonTypeObject="getButtonTypeObject()"
|
||||
v-model="selectedPackageName"
|
||||
:validationRules="validationRules"
|
||||
:isRequired="isRequired"
|
||||
|
|
@ -18,6 +18,7 @@ import baseMixin from "@/mixins/base-mixin.js";
|
|||
import { processIfStatements } from "@/helpers/cms-content-helper";
|
||||
import servicePackageRadio from "./service-package-radio/service-package-radio";
|
||||
import servicePackageRadioExperiment from "@/experiment-components/service-package-radio";
|
||||
import servicePackageRadioAfterpayExperiment from "@/experiment-components/service-package-radio-for-afterpay";
|
||||
import { partTypeStrings } from "@/constants/part-type-strings";
|
||||
import { packageNames } from "@/constants/package-names";
|
||||
import {
|
||||
|
|
@ -61,6 +62,7 @@ export default {
|
|||
return {
|
||||
servicePackageRadio: servicePackageRadio,
|
||||
servicePackageRadioExperiment: servicePackageRadioExperiment,
|
||||
servicePackageRadioAfterpayExperiment: servicePackageRadioAfterpayExperiment,
|
||||
selectedPackageName: null,
|
||||
};
|
||||
},
|
||||
|
|
@ -156,6 +158,7 @@ export default {
|
|||
Text: this.isInsuranceSelected
|
||||
? false
|
||||
: "Special: Save $" + this.getServicePackageDiscountPrice(),
|
||||
isInsuranceSelected: this.isInsuranceSelected,
|
||||
},
|
||||
}));
|
||||
this.$emit("currentNumberOfPackages", modifiedAnswers.length);
|
||||
|
|
@ -237,6 +240,24 @@ export default {
|
|||
"true"
|
||||
);
|
||||
},
|
||||
isAfterpayBreakoutDisplay() {
|
||||
return (
|
||||
(!this.shouldHideRecalibration || !this.isRecalibrationOnOrder) &&
|
||||
experimentMixin.methods.hasSettingEqualTo(
|
||||
experimentSettings.DISPLAY_AFTERPAY_BREAKOUT_DISPLAY,
|
||||
"true"
|
||||
)
|
||||
);
|
||||
},
|
||||
getButtonTypeObject() {
|
||||
if (this.isAfterpayBreakoutDisplay()) {
|
||||
return this.servicePackageRadioAfterpayExperiment;
|
||||
}
|
||||
if (this.hasPricingByDay()) {
|
||||
return this.servicePackageRadioExperiment;
|
||||
}
|
||||
return this.servicePackageRadio;
|
||||
},
|
||||
getHeaderTextFromCms(cmsWidgetName) {
|
||||
return this.getCmsContent(cmsWidgetName, "HeaderText");
|
||||
},
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
marginTopSizeOverride="1" />
|
||||
</template>
|
||||
<locationAlerts cmsWidgetPrefix="LocationAlert-" ref="locationAlerts" />
|
||||
<datePickerForPricingByDay
|
||||
<datePicker
|
||||
customComponentId="dateQuestion"
|
||||
selectableDatesSetting="custom"
|
||||
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 loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
|
||||
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 timeSlotModalQuestion from "./time-slot-modal-question/time-slot-modal-question";
|
||||
import textBlock from "@/digital-components/text-block/text-block";
|
||||
|
|
@ -298,14 +298,13 @@ export default {
|
|||
);
|
||||
|
||||
// While Pricing By Day Experiment is active, using the updated datePicker
|
||||
const datePickerInitialDataPromise =
|
||||
await datePickerForPricingByDay.methods.loadInitialData({
|
||||
// setup config options for date-picker
|
||||
selectableDatesSetting: "custom",
|
||||
initialViewRowsToShow: 5,
|
||||
customSelectableDatesCallback: getAvailableDates,
|
||||
preSelectedDate: preSelectedDate,
|
||||
});
|
||||
const datePickerInitialDataPromise = await datePicker.methods.loadInitialData({
|
||||
// setup config options for date-picker
|
||||
selectableDatesSetting: "custom",
|
||||
initialViewRowsToShow: 5,
|
||||
customSelectableDatesCallback: getAvailableDates,
|
||||
preSelectedDate: preSelectedDate,
|
||||
});
|
||||
|
||||
// Get pricingByDayUpcharge needed for Pricing By Day
|
||||
const pricingByDayUpchargePartPromise = showPricingByDay
|
||||
|
|
@ -735,7 +734,7 @@ export default {
|
|||
funnelSubHeader,
|
||||
Form,
|
||||
loadingModal,
|
||||
datePickerForPricingByDay,
|
||||
datePicker,
|
||||
locationAlerts,
|
||||
timeSlotModalQuestion,
|
||||
textBlock,
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ afterEach(() => {
|
|||
});
|
||||
|
||||
describe("appointment-type-question.vue", () => {
|
||||
it("Should display all options if both in-shop and mobile are available", async () => {
|
||||
it("Should display all options if in-shop, mobile, and dropoff are available", async () => {
|
||||
// Arrange/Act
|
||||
const { wrapper } = setupMocks({
|
||||
mixins: [mockMixin],
|
||||
|
|
@ -67,6 +67,7 @@ describe("appointment-type-question.vue", () => {
|
|||
cmsWidgetName: cmsWidgetName,
|
||||
isServiceableInshop: true,
|
||||
isServiceableMobile: true,
|
||||
isServiceableDropoff: true,
|
||||
},
|
||||
mountOptions: {
|
||||
attachTo: document.body,
|
||||
|
|
@ -132,6 +133,40 @@ describe("appointment-type-question.vue", () => {
|
|||
]);
|
||||
});
|
||||
|
||||
it("Should display only the In-Shop and Drop-Off answers when mobile service is not available", async () => {
|
||||
// Arrange/Act
|
||||
const { wrapper } = setupMocks({
|
||||
mixins: [mockMixin],
|
||||
props: {
|
||||
cmsWidgetName: cmsWidgetName,
|
||||
isServiceableInshop: true,
|
||||
isServiceableMobile: false,
|
||||
isServiceableDropoff: true,
|
||||
},
|
||||
mountOptions: {
|
||||
attachTo: document.body,
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
expect(wrapper.vm.answersToDisplay).toEqual([
|
||||
{
|
||||
AnswerImageUrl: "",
|
||||
Name: "Inshop",
|
||||
SubText: "",
|
||||
SubWidgetName: "",
|
||||
Text: "In-shop",
|
||||
},
|
||||
{
|
||||
AnswerImageUrl: "",
|
||||
Name: "Dropoff",
|
||||
SubText: "",
|
||||
SubWidgetName: "",
|
||||
Text: "Drop-off",
|
||||
},
|
||||
]);
|
||||
});
|
||||
|
||||
it("Should display only the Mobile answer when only mobile service is available", async () => {
|
||||
// Arrange/Act
|
||||
const { wrapper } = setupMocks({
|
||||
|
|
@ -140,6 +175,7 @@ describe("appointment-type-question.vue", () => {
|
|||
cmsWidgetName: cmsWidgetName,
|
||||
isServiceableInshop: false,
|
||||
isServiceableMobile: true,
|
||||
isServiceableDropoff: false,
|
||||
},
|
||||
mountOptions: {
|
||||
attachTo: document.body,
|
||||
|
|
@ -172,6 +208,7 @@ describe("appointment-type-question.vue", () => {
|
|||
cmsWidgetName: cmsWidgetName,
|
||||
isServiceableInshop: true,
|
||||
isServiceableMobile: true,
|
||||
isServiceableDropoff: true,
|
||||
},
|
||||
mountOptions: {
|
||||
attachTo: document.body,
|
||||
|
|
@ -205,6 +242,7 @@ describe("appointment-type-question.vue", () => {
|
|||
cmsWidgetName: cmsWidgetName,
|
||||
isServiceableInshop: false,
|
||||
isServiceableMobile: false,
|
||||
isServiceableDropoff: false,
|
||||
},
|
||||
mountOptions: {
|
||||
attachTo: document.body,
|
||||
|
|
|
|||
|
|
@ -47,6 +47,7 @@ function resetMockStoreData() {
|
|||
registration: {
|
||||
licensePlate: null,
|
||||
},
|
||||
isServiceable: true,
|
||||
},
|
||||
serviceLocation: {
|
||||
address: null,
|
||||
|
|
@ -187,6 +188,7 @@ function applyMockStoreDataToGetters() {
|
|||
policy: mockStoreData.policy,
|
||||
externalParameterServiceZip: mockStoreData.externalParameterServiceZip,
|
||||
emailOrSms: mockStoreData.customer.emailAddress,
|
||||
vehicle: mockStoreData.vehicle,
|
||||
};
|
||||
store.state.order = mockStoreData;
|
||||
store.state.applicationUser.experiments = mockExperimentSettings;
|
||||
|
|
@ -509,6 +511,5 @@ function setupMocks({ customMountOptions, customZipQuery, customZipDataResponse
|
|||
];
|
||||
|
||||
const wrapper = shallowMount(serviceZip, mountOptions);
|
||||
|
||||
return wrapper;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -110,6 +110,8 @@ export default {
|
|||
return {
|
||||
serviceZipCode: this.getZipFromStore() ?? this.$route.query.zipcode,
|
||||
emailOrSms: this.getEmailOrSmsFromStore(),
|
||||
carId: this.getCarIdfromStore(),
|
||||
isHeavyTruck: this.getIsVehicleHeavyTruckServiceableFromStore(),
|
||||
displayInvalidZipAlert: false,
|
||||
displayNonServiceableZipAlert: false,
|
||||
};
|
||||
|
|
@ -184,6 +186,20 @@ export default {
|
|||
arePagePrerequisitesValid() {
|
||||
return store.getters.damage.isRepair || store.getters.damage.glassToReplace?.length > 0;
|
||||
},
|
||||
getCarIdfromStore() {
|
||||
return store.getters.vehicle.carId;
|
||||
},
|
||||
getIsVehicleHeavyTruckServiceableFromStore() {
|
||||
return store.getters.vehicle.isBigTruck && store.getters.vehicle.canSafeliteService;
|
||||
},
|
||||
async findClosestApplicableShops() {
|
||||
return await this.dispatchStoreActionWithLogging(
|
||||
storeActions.GET_CLOSEST_APPLICABLE_SHOPS,
|
||||
{ zip: this.serviceZipCode, carId: this.carId },
|
||||
"service-zip"
|
||||
);
|
||||
},
|
||||
|
||||
async backButtonAction() {
|
||||
const skipVin = await skipVinLookup();
|
||||
// route to move backwards
|
||||
|
|
@ -252,6 +268,26 @@ export default {
|
|||
return this.$refs.navbar.removeLoader();
|
||||
}
|
||||
this.displayNonServiceableZipAlert = false;
|
||||
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();
|
||||
}
|
||||
}
|
||||
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 policy = this.$store.getters.policy;
|
||||
|
|
@ -309,6 +345,8 @@ export default {
|
|||
watch: {
|
||||
serviceZipCode() {
|
||||
this.displayNonServiceableZipAlert = false;
|
||||
this.displayNoServiceAlert = false;
|
||||
this.displayNoServiceAlert = false;
|
||||
},
|
||||
},
|
||||
components: {
|
||||
|
|
|
|||
|
|
@ -32,6 +32,7 @@ jest.mock("@/store", () => ({
|
|||
damage: {
|
||||
glassToReplace: "windshield",
|
||||
},
|
||||
isHeavyTruckVehicle: true,
|
||||
},
|
||||
}));
|
||||
|
||||
|
|
|
|||
|
|
@ -197,6 +197,8 @@ export default {
|
|||
vin: this.getVinFromStore(),
|
||||
serviceZipCode: this.getZipFromStore() ?? this.$route.query.zipcode,
|
||||
emailOrSms: this.getEmailOrSmsFromStore(),
|
||||
carId: this.getCarIdfromStore(),
|
||||
isHeavyTruck: this.getIsVehicleHeavyTruckServiceableFromStore(),
|
||||
isCarIdDifferent: false,
|
||||
customAlertData: {},
|
||||
previouslyEnteredCarId: "",
|
||||
|
|
@ -245,6 +247,16 @@ export default {
|
|||
);
|
||||
}
|
||||
},
|
||||
getIsVehicleHeavyTruckServiceableFromStore() {
|
||||
return store.getters.vehicle.isBigTruck && store.getters.vehicle.canSafeliteService;
|
||||
},
|
||||
async findClosestApplicableShops() {
|
||||
return await this.dispatchStoreActionWithLogging(
|
||||
storeActions.GET_CLOSEST_APPLICABLE_SHOPS,
|
||||
{ zip: this.serviceZipCode, carId: this.carId },
|
||||
"vin-lookup"
|
||||
);
|
||||
},
|
||||
async forwardButtonAction() {
|
||||
this.resetAlerts();
|
||||
|
||||
|
|
@ -277,7 +289,6 @@ export default {
|
|||
return this.$refs.navbar.removeLoader();
|
||||
}
|
||||
this.displayInvalidZipAlert = false;
|
||||
|
||||
// If either lookup fails, remove the loader and stop processing the page.
|
||||
if (!resultMap.vehicleLookupResponse || !resultMap.zipCodeData.isServiceable) {
|
||||
// If the vehicle result is undefined, the vin entered was invalid.
|
||||
|
|
@ -329,6 +340,18 @@ export default {
|
|||
},
|
||||
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 (!this.emailOrSms) {
|
||||
|
|
@ -393,7 +416,6 @@ export default {
|
|||
false
|
||||
);
|
||||
}
|
||||
|
||||
// if no value due to field being optional, blank both phone and email address
|
||||
if (!this.emailOrSms) {
|
||||
await this.dispatchStoreAction(storeActions.SAVE_PHONE_NUMBER, "", false);
|
||||
|
|
@ -476,6 +498,8 @@ export default {
|
|||
this.displayInvalidZipAlert = false;
|
||||
this.displayVinNotFoundAlert = false;
|
||||
this.displayVinScanFailedAlert = false;
|
||||
this.displayNoServiceAlert = false;
|
||||
this.displayNoServiceAlert = false;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
|
|
|
|||
|
|
@ -59,6 +59,7 @@ const routes = [
|
|||
log(` --from.redirectedFrom:>${JSON.stringify(from.redirectedFrom)}<`, "");
|
||||
|
||||
await analyticsMixin.methods.validateSession();
|
||||
var fromHeritage = getQuerystringParameter(queryStrings.FROM_HERITAGE);
|
||||
var offerQuote = getQuerystringParameter(queryStrings.OFFER_QUOTE);
|
||||
log(" --offerQuote: ", offerQuote);
|
||||
// after session is validated, remove the fromHeritage querystring if it exists so session expiration works
|
||||
|
|
@ -185,7 +186,7 @@ const routes = [
|
|||
}
|
||||
|
||||
//Update CASH tab when return from heritage and have offerQuote param
|
||||
if (to.query.fmgPage !== fmgPageValues.QUOTE && offerQuote) {
|
||||
if (offerQuote === "true" && fromHeritage === "true") {
|
||||
store.commit(storeMutations.UPDATE_IS_INSURANCE, false);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -678,6 +678,9 @@ export const mutations = {
|
|||
imageUrl: sessionInformation.order.vehicle?.imageUrl,
|
||||
imageVifNumber: sessionInformation.order.vehicle?.imageVifNumber,
|
||||
imageColor: sessionInformation.order.vehicle?.imageVifColor,
|
||||
vehicleSubType: sessionInformation.order.vehicle?.vehicleSubType,
|
||||
vehicleSpecialClass: sessionInformation.order.vehicle?.vehicleSpecialClass,
|
||||
isBigTruck: sessionInformation.order.vehicle?.isBigTruck,
|
||||
});
|
||||
|
||||
state.order.damage.glassToReplace = sessionInformation.order.damage.glassToReplace;
|
||||
|
|
@ -3214,8 +3217,8 @@ export const actions = {
|
|||
context.commit(storeMutations.UPDATE_CUSTOMER_WAITLIST_REQUESTED, waitListRequested);
|
||||
},
|
||||
|
||||
savePageData(context, emailOrSms) {
|
||||
context.commit(storeMutations.UPDATE_PAGE_DATA, emailOrSms);
|
||||
savePageData(context, pageData) {
|
||||
context.commit(storeMutations.UPDATE_PAGE_DATA, pageData);
|
||||
},
|
||||
|
||||
saveVin(context, { isSelectedGlassAvailableForVehicle, vehicleInfo }) {
|
||||
|
|
|
|||
|
|
@ -136,7 +136,7 @@ export default {
|
|||
color: $white;
|
||||
background: linear-gradient(84.45deg, #125b7e 0%, #3b8fb8 100%);
|
||||
border-radius: 0.5rem;
|
||||
z-index: 5;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&:checked:focus + .list-button-horizontal-content {
|
||||
|
|
|
|||
Loading…
Reference in a new issue