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

Merge branch 'CSR-1357-customer-details' of https://github.com/Safelite/DigitalConsumer.FixMyGlass into CSR-1357-customer-details

Browse source
This commit is contained in:
Bryan Mauger 2023-06-19 10:53:52 -04:00
commit 07fbc1a73e
62 changed files with 3031 additions and 1117 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
jest.config.js
View file

@ -15,10 +15,12 @@ module.exports = {
"!src/layouts/vehicle-damage/windshield-options/windshield-options.vue",
"!src/layouts/reveal/**/*.vue",
"!src/ux-components/text-link/**/*.vue",
"!src/common-components/date-picker/**/*.vue", // Temp until unit tests completed
"!src/digital-components/date-picker/**/*.vue", // Temp until unit tests completed
"!src/layouts/vin-lookup/**/*.vue", //Temporary for Quote page testing
"!src/common-components/funnel-header/menu-modal/**/*.vue",
"!src/layouts/schedule/*.vue", // Temp test exclusion while in development
"!src/layouts/schedule/helpers/schedule-helper.js", // Temp test exclusion while in development
"!src/layouts/review/*.vue", // Temp test exclusion while in development
// END
], // ! means exclude from coverage.
testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],

12
src/constants/endpoints.js
View file

@ -106,6 +106,18 @@ const endpoints = {
url: "/parts/api/v1/parts/part-from-capability-answer",
method: "POST",
},
GetShopTimeSlots: {
url: "/schedule/api/v1/schedule/shop-time-slots",
method: "POST",
},
GetMobileTimeSlots: {
url: "/schedule/api/v1/schedule/mobile-time-slots",
method: "POST",
},
GetMobilePremiumFee: {
url: "/parts/api/v1/parts/mobile-premium-fee",
method: "GET",
},
SaveSession: {
url: "/order/api/v1/order/save-session",
method: "POST",

1
src/constants/experiments.js
View file

@ -5,6 +5,7 @@ const experimentUniverses = {
const experimentSettings = {
GOOGLE_CUSTOM_DIMENSION_INDEX: "Google Custom Dimension Index",
SUPPRESS_VIN_CAPTURE: "SuppressVinCapture",
DISPLAY_AVAILABILITY_INDICATORS: "DisplayAvailabilityIndicators",
};
const experimentTriggers = {

11
src/constants/schedule-constants.js Normal file
View file

@ -0,0 +1,11 @@
const AppointmentTypeStrings = {
IN_SHOP: "Inshop",
MOBILE: "Mobile",
DROP_OFF: "Dropoff",
};
const PREMIUM_TIME_SLOT_ID_FLAG = "-premium";
const PREMIUM_FEE_PART_TYPE = "EARLY BIRD";
export { AppointmentTypeStrings, PREMIUM_TIME_SLOT_ID_FLAG, PREMIUM_FEE_PART_TYPE };

16
src/constants/scheduling.js
View file

@ -1,16 +0,0 @@
const monthsOfYear = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
export { monthsOfYear };

8
src/constants/store-actions.js
View file

@ -32,7 +32,10 @@ const storeActions = {
GET_MOLDING_QUESTIONS: "getMoldingQuestions",
GET_MOBILE_FEE_PART: "getMobileFeePart",
GET_SERVICEABILITY_DETAILS: "getServiceabilityDetails",
GET_SHOP_TIME_SLOTS: "getShopTimeSlots",
GET_MOBILE_TIME_SLOTS: "getMobileTimeSlots",
GET_PROVIDERS: "getProviders",
GET_MOBILE_PREMIUM_FEE: "getMobilePremiumFee",
SAVE_SESSION: "saveSession",
LOAD_SESSION: "loadSession",
UPDATE_STORE_WITH_SAVE_SESSION_RESPONSE: "updateStoreWithSaveSessionResponse",
@ -60,12 +63,15 @@ const storeActions = {
SAVE_VEHICLE_STYLE: "saveVehicleStyle",
SAVE_VEHICLE_DAMAGE: "saveVehicleDamage",
SAVE_VIN_LOOKUP: "saveVinLookup",
SAVE_SERVICE_ZIP_CODE_INFO: "saveServiceZipCodeInfo",
SAVE_SERVICE_LOCATION: "saveServiceLocation",
SAVE_SCHEDULE: "saveSchedule",
SAVE_EMAIL: "saveEmail",
SAVE_REGISTRATION_LICENSE_PLATE_LOOKUP: "saveRegistrationLicensePlateLookup",
SAVE_VIN: "saveVin",
SAVE_REGISTRATION_ADDRESS_LOOKUP: "saveRegistrationAddressLookup",
SAVE_GLASS_PARTS: "saveGlassParts",
SAVE_GLASS_PART_PRICES: "saveGlassPartPrices",
SAVE_PART_QUESTION_ANSWERS: "savePartQuestionAnswers",
RESET_MOLDING_AND_CAPABILITY_QUESTIONS_IF_NEEDED:
"resetMoldingAndCapabilityQuestionAnswersIfNeeded",
@ -74,6 +80,8 @@ const storeActions = {
SAVE_PAYMENT_TYPE: "savePaymentType",
SAVE_PARENT_ACCOUNT_NUMBER: "saveParentAccountNumber",
SAVE_SUPPORTING_ITEMS: "saveSupportingItems",
SAVE_SUPPORTING_ITEMS_SUPPRESSING_STATE_RESETTING:
"saveSupportingItemsSuppressingStateResetting",
SAVE_VAPS: "saveVaps",
};

5
src/constants/store-mutations.js
View file

@ -33,6 +33,7 @@ const storeMutations = {
UPDATE_REGISTRATION: "updateRegistration",
UPDATE_SERVICE_LOCATION: "updateServiceLocation",
UPDATE_SCHEDULE: "updateSchedule",
UPDATE_CUSTOMER_EMAIL_ADDRESS: "updateCustomerEmailAddress",
@ -57,6 +58,10 @@ const storeMutations = {
RESET_GLASS_PARTS_STATE: "resetGlassPartsState",
RESET_STATE: "resetState",
RESET_SAVE_SESSION_PROMISE: "resetSaveSessionPromise",
RESET_SERVICE_LOCATION_APPOINTMENT_TYPE: "resetServiceLocationAppointmentType",
RESET_SERVICE_LOCATION_PROVIDER: "resetServiceLocationProvider",
RESET_SERVICE_LOCATION_MOBILE_ADDRESS: "resetServiceLocationMobileAddress",
RESET_SCHEDULE: "resetSchedule",
// OTHER MUTATIONS
UPDATE_PAGE_DATA: "updatePageData",

12
src/digital-components/button-question/button-question.vue
View file

@ -52,7 +52,7 @@ https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Com
:isWide="isWide"
:validationRules="validationRules"
:textPosition="textPosition"
:additionalButtonStyling="additionalButtonStyling"
:additionalButtonData="additionalButtonData"
:lastValuePushedToGa="lastValuePushedToGa"
:setLastValuePushedToGa="setLastValuePushedToGa"
:suppressError="suppressError"
@ -120,14 +120,13 @@ export default {
isRequired: Boolean,
isOverflowScrollable: Boolean,
isWide: Boolean,
isCashOrInsurance: Boolean,
modelValue: [Array, Number, String, Object],
modelValue: [Array, Number, String],
value: [Number, String],
validationRules: String,
suppressError: Boolean,
useTextForValue: Boolean,
valueToLogType: String,
additionalButtonStyling: String,
additionalButtonData: Object,
isSmallQuestionText: Boolean,
customButtonQuestionId: String,
logDisplayedValuesEvent: {
@ -141,7 +140,7 @@ export default {
const fieldOptions = {
value: modelValue,
initialValue: modelValue,
initialValue: null,
};
const { errorMessage, handleBlur, handleChange, meta, validate, errors, resetField } =
@ -182,6 +181,7 @@ export default {
getComponentLoopWrapperClasses() {
let classes;
switch (this.buttonTypeString) {
case "timeSlotModalListButton":
case "listButton":
classes = "w-100";
break;
@ -255,7 +255,7 @@ export default {
},
},
watch: {
modelValue(newValue) {
modelValue(newValue, oldValue) {
this.resetField({
value: newValue,
});

1
src/digital-components/date-picker/date-picker-spec.js1
View file

@ -1 +0,0 @@
test.todo("some test to be written in the future");

52
src/digital-components/date-picker/date-picker.spec.js → src/digital-components/date-picker/date-picker.spec.js1
View file

@ -6,15 +6,55 @@ import { getMountOptions } from "@/helpers/unit-test-helper.js";
describe("date-picker.vue", () => {
describe("initial setup", () => {
test("Creates a date object from today", () => {
test("Creates a date object from today", async () => {
// Arrange
const { wrapper } = setupMocks({});
const { wrapper } = await setupMocks({
propsData: {
selectableDatesSetting: "custom"
},
});
// Act
const testResult = wrapper.vm.todayDate instanceof Date;
wrapper.vm.loadInitialData = jest.fn().mockImplementation(
() =>
new Promise((resolve, reject) => {
resolve({
data: [responseValue],
});
})
);
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
expect(wrapper.vm.loadInitialData).toHaveBeenCalled();
// console.log("wrapper.vm.today: ", wrapper.vm.today)
// // Act
// const testResult = wrapper.vm.today instanceof Date;
// console.log("testResult: ", testResult)
// Assert
expect(testResult).toEqual(true);
// // Assert
// expect(testResult).toEqual(true);
wrapper.unmount();
});

811
src/digital-components/date-picker/date-picker.vue
View file

@ -1,58 +1,68 @@
<template>
<div class="date-picker text-center" :class="calendarViewDirection">
<fieldset v-if="months">
<legend class="sr-only">Date Picker</legend>
<fieldset id="date-picker-fieldset" ref="datePickerFieldset">
<legend class="sr-only">Select a day and time</legend>
<div
v-for="month in months"
:key="`${month.monthLabel}-${month.yearNum.toString()}-${months.length}`">
:key="`${month.monthLabel}-${month.yearNum?.toString()}`"
:id="`${month.monthLabel}-${month.yearNum?.toString()}`"
class="calendar-grid-container position-relative"
:class="[
hideSomeDaysForInitialView ? 'partial-month-initial-view' : '',
month.monthClass,
]">
<div class="month-year body-small d-flex align-items-center small">
{{ month.monthLabel }} {{ month.yearNum?.toString() }}
</div>
<div
class="calendar-grid-container"
:class="[isInitialView === true ? 'initial-view' : '', month.monthClass]">
<div class="month-year body-small d-flex align-items-center ps-3 small">
{{ month.monthLabel }} {{ month.yearNum.toString() }}
</div>
<div
v-if="calendarViewDirection === 'future'"
class="legend caption d-flex align-items-center justify-content-end">
<span class="legend-circle me-1"></span> &equals; Available
</div>
<div class="nav-back ps-3"><button></button></div>
<div class="nav-forward pe-3"><button></button></div>
<!-- Do the days of the weeek need to be read? -->
<div class="grid-item caption"><span class="sr-only">Sunday</span>S</div>
<div class="grid-item caption"><span class="sr-only">Monday</span>M</div>
<div class="grid-item caption"><span class="sr-only">Tuesday</span>T</div>
<div class="grid-item caption"><span class="sr-only">Wednesday</span>W</div>
<div class="grid-item caption"><span class="sr-only">Thursday</span>T</div>
<div class="grid-item caption"><span class="sr-only">Friday</span>F</div>
<div class="grid-item caption"><span class="sr-only">Saturday</span>S</div>
<div
v-for="date in month.dates"
:key="`${month.monthLabel}-${date.dateNum.toString()}-${months.length}`"
class="grid-item radio-wrapper"
:class="[
date.dateNum === 1 ? 'first-day-' + month.startDateDayIndex : '',
date.dayClasses,
]">
<input
:disabled="!isSelectableDate(date.inputValue)"
type="radio"
name="day-of-month"
v-model="selectedDate"
:value="date.inputValue"
:id="`${month.monthLabel}-${date.dateNum.toString()}`" />
<label :for="`${month.monthLabel}-${date.dateNum.toString()}`">
<span>{{ date.dateNum.toString() }}</span>
</label>
</div>
v-if="calendarViewDirection === 'future'"
class="legend caption d-flex align-items-center justify-content-end">
<span class="legend-circle me-1"></span> &equals; Available
</div>
<div class="separator-line"></div>
<div class="nav-back ps-3"><button></button></div>
<div class="nav-forward pe-3"><button></button></div>
<div class="grid-item caption"><span class="sr-only">Sunday</span>S</div>
<div class="grid-item caption"><span class="sr-only">Monday</span>M</div>
<div class="grid-item caption"><span class="sr-only">Tuesday</span>T</div>
<div class="grid-item caption"><span class="sr-only">Wednesday</span>W</div>
<div class="grid-item caption"><span class="sr-only">Thursday</span>T</div>
<div class="grid-item caption"><span class="sr-only">Friday</span>F</div>
<div class="grid-item caption"><span class="sr-only">Saturday</span>S</div>
<div
v-for="date in month.dates"
:key="date.inputValue"
:id="date.inputValue"
class="grid-item radio-wrapper"
:class="[
date.dateNum === 1 ? 'first-day-' + month.startDateDayIndex : '',
date.dayClasses,
date.isSelectable ? 'selectable-day' : '',
]">
<input
:disabled="!date.isSelectable"
type="radio"
name="day-of-month"
v-model="selectedDate"
@click="fireDateClickedEvent"
:value="date.inputValue"
:id="`${month.monthLabel}-${date.dateNum.toString()}`" />
<label :for="`${month.monthLabel}-${date.dateNum.toString()}`">
<span>{{ date.dateNum.toString() }}</span>
</label>
</div>
</div>
<loader
:class="[!isLoading ? 'date-picker-hidden' : '']"
loaderColor="blue"
loaderPosition="center" />
</fieldset>
<button
v-if="calendarViewDirection === 'future'"
v-if="calendarViewDirection === 'future' && !disableViewMoreDatesButton"
type="button"
class="btn btn-link"
@click="goForward">
:disabled="isLoading"
@click="showAnotherMonth">
View more dates
</button>
</div>
@ -60,39 +70,35 @@
<script>
// Supporting files
import { monthsOfYear } from "@/constants/scheduling.js";
const SelectableDaysOptions = Object.freeze({
CUSTOM: "custom",
PAST: "past",
});
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";
export default {
name: "datePicker",
data() {
return {
calendarData: [],
monthsBeforeToLoadOffset: 0,
monthsAfterToLoadOffset: 1,
isLoading: true,
months: null,
disableViewMoreDatesButton: false,
selectableDatesData: [], // NOTE: uses monthNum (1-based), NOT monthIndex (0-based)
isInitialView: true,
initialViewRowsToShow: 5,
initialViewRowsTally: 0,
hideSomeDaysForInitialView: null,
};
},
props: {
selectableDates: {
selectableDatesSetting: {
type: String,
validator(value) {
return Object.values(SelectableDaysOptions).includes(value);
return Object.values(selectableDaysOptions).includes(value);
},
default: SelectableDaysOptions.PAST,
default: selectableDaysOptions.PAST,
},
modelValue: {
type: Object,
},
todayOverrideDateString: {
// only used for unit tests to override today's date
// keep for use in unit tests to override today's date
type: String,
default: null,
},
@ -104,20 +110,35 @@ export default {
},
},
computed: {
todayDate() {
return this.todayOverrideDateString
? new Date(this.todayOverrideDateString)
: new Date();
},
months() {
if (this.calendarData?.length < 1) {
this.setCalendarData();
today() {
if (this.todayOverrideDateString) {
return new Date(this.todayOverrideDateString);
}
return this.calendarData;
return new Date();
},
todayMonthIndex() {
return this.today.getMonth() + 1;
},
todayYearNum() {
return this.today.getFullYear();
},
todayDayIndex() {
return this.today.getDay();
},
todayDateNum() {
return this.today.getDate();
},
currentWeekStartDateNum() {
return this.todayDayIndex >= this.todayDateNum
? 1
: this.todayDateNum - this.todayDayIndex;
},
currentWeekEndDateNum() {
return this.todayDateNum + (6 - this.todayDayIndex);
},
calendarViewDirection() {
if (this.selectableDates === "past") return "past";
if (this.selectableDates === "custom") return "future";
if (this.selectableDatesSetting === "past") return "past";
if (this.selectableDatesSetting === "custom") return "future";
return "none";
},
selectedDate: {
@ -130,260 +151,482 @@ export default {
},
},
methods: {
goForward() {
if (this.isInitialView) {
this.isInitialView = false; // 1st click removes hidden styling
} else {
this.addMonthData(); // 2nd click adds 1 month data
}
fireDateClickedEvent() {
this.$emit("date-clicked");
},
setCalendarData() {
getWeekStartDate(date) {
const dayOfWeek = date.getDay();
// Subtract the day of the week from date to get the date of Sunday
const sunday = new Date(date);
sunday.setDate(sunday.getDate() - dayOfWeek);
return sunday;
},
getWeekEndDate(date) {
const dayOfWeek = date.getDay();
const daysUntilSaturday = 6 - dayOfWeek; // Calculate the number of days until Saturday
// Clone the given date and add the remaining days until Saturday
const saturday = new Date(date);
saturday.setDate(date.getDate() + daysUntilSaturday);
return saturday;
},
getNextWeekSunday(date) {
const dayOfWeek = date.getDay();
const daysUntilNextSunday = 7 - dayOfWeek; // Calculate the number of days until the next Sunday
// Clone the given date and add the remaining days until Sunday
const nextSunday = new Date(date);
nextSunday.setDate(date.getDate() + daysUntilNextSunday);
return nextSunday;
},
getInitialViewWeeks(today, initialViewRowsToShow) {
// TODO: this only is for future direction; need to create logic for past direction
const weeks = [];
let weekStartDate = this.getWeekStartDate(today);
let weekEndDate = this.getWeekEndDate(today);
for (let i = 0; i < initialViewRowsToShow; i++) {
if (i > 0) {
weekStartDate = this.getNextWeekSunday(weekEndDate);
weekEndDate = this.getWeekEndDate(weekStartDate);
}
weeks.push({
weekNum: i + 1,
weekStartDate: weekStartDate,
weekEndDate: weekEndDate,
});
}
// are any of these weeks split between two months?
const hasSplitWeek = (week) => {
return week.weekStartDate.getMonth() !== week.weekEndDate.getMonth() ? true : false;
};
const splitWeekIndex = weeks.findIndex(hasSplitWeek);
if (splitWeekIndex > -1) {
const week1 = [];
const week2 = [];
let switchToWeek2 = false;
for (let j = 0; j < 7; j++) {
const newDate = new Date(weeks[splitWeekIndex].weekStartDate);
newDate.setDate(newDate.getDate() + j);
if (newDate.getDate() === 1) switchToWeek2 = true;
if (switchToWeek2) {
week2.push(newDate);
} else {
week1.push(newDate);
}
}
const week1EndDate = week1[week1.length - 1];
const week2StartDate = week2[0];
if (week1EndDate < today) {
// replace week 1 with week 2
weeks[splitWeekIndex].weekStartDate = week2StartDate;
} else {
const newWeek = {
weekNum: weeks[splitWeekIndex].weekNum,
weekStartDate: week2StartDate,
weekEndDate: weeks[splitWeekIndex].weekEndDate,
};
weeks[splitWeekIndex].weekEndDate = week1EndDate;
weeks.splice(splitWeekIndex + 1, 0, newWeek);
weeks.pop();
weeks.forEach((item, index) => {
if (index > splitWeekIndex) {
item.weekNum = item.weekNum + 1;
}
});
}
}
return weeks;
},
async loadInitialData(config) {
let todayDate;
if (this.today) {
todayDate = this.today;
} else if (config.todayOverrideDateString) {
todayDate = new Date(config.todayOverrideDateString);
} else {
todayDate = new Date();
}
const todayMonthIndex = todayDate.getMonth() + 1;
const todayYearNum = todayDate.getFullYear();
// TODO - set up currentMonthStart if direction is PAST:
// let currentMonthStart = new Date(todayYearNum, todayMonthIndex - 1, 1);
const currentMonthEnd = new Date(todayYearNum, todayMonthIndex, 0);
let calendarViewDirection = "none";
if (config.selectableDatesSetting === "past") calendarViewDirection = "past";
if (config.selectableDatesSetting === "custom") calendarViewDirection = "future";
const initialViewWeeks = this.getInitialViewWeeks(
todayDate,
config.initialViewRowsToShow
);
const initialViewStartDate = todayDate;
const initialViewEndDate = initialViewWeeks[initialViewWeeks.length - 1].weekEndDate;
const firstSaturdayMonth = initialViewWeeks[0].weekEndDate.getMonth();
const lastSundayMonth =
initialViewWeeks[initialViewWeeks.length - 1].weekStartDate.getMonth();
let hideSomeDaysForInitialView = false;
let hideSecondMonth = false;
// TODO - NEED TO CREATE OPPOSITE LOGIC FOR "past" DIRECTION LIKE BELOW vvvvv
if (calendarViewDirection === "future") {
if (firstSaturdayMonth !== lastSundayMonth) {
hideSomeDaysForInitialView = true;
}
if (initialViewStartDate.getMonth() === lastSundayMonth) {
hideSecondMonth = true;
if (currentMonthEnd > initialViewEndDate) {
// should part of 1st month be hidden?
hideSomeDaysForInitialView = true;
}
}
}
const myPromise = new Promise((resolve, reject) => {
const response = config.customSelectableDatesCallback(
initialViewStartDate.toISOString().split("T")[0],
initialViewEndDate.toISOString().split("T")[0],
store.getters.order.serviceLocation.appointmentType,
store.getters.order.serviceLocation.provider.providerNumber
);
resolve(response);
});
return myPromise.then((response) => {
const initialData = {
todayDate: todayDate,
initialViewStartDate: initialViewStartDate,
initialViewEndDate: initialViewEndDate,
calendarViewDirection: calendarViewDirection,
initialShopTimeSlotsResponse: response,
hideSomeDaysForInitialView: hideSomeDaysForInitialView,
hideSecondMonth: hideSecondMonth,
};
return initialData;
});
},
initializeComponent(initialData) {
this.setCalendarData(initialData);
},
scrollToElement(elementId, speed, easing) {
// TODO - needs to be cleaned up & refactored
function scrollTopSmooth(wrapper, target, duration = 300, timingName = "linear") {
const initY = wrapper.scrollTop;
const wrapperRect = wrapper.getBoundingClientRect();
const targetRect = target.getBoundingClientRect();
const targetY = targetRect.top - wrapperRect.top - BUFFER_OFFSET;
const timingFunc = TIMINGFUNC_MAP[timingName];
let start = null;
const step = (timestamp) => {
start = start || timestamp;
const progress = timestamp - start,
// Growing from 0 to 1
time = Math.min(1, (timestamp - start) / duration);
const percentageNew = timingFunc(time);
const distanceToGo = targetY;
const thisDistance = percentageNew * distanceToGo;
wrapper.scrollTo(0, initY + thisDistance);
if (percentageNew < 1) {
window.requestAnimationFrame(step);
}
};
window.requestAnimationFrame(step);
}
const wrapper = this.$refs.datePickerFieldset;
const targetMonth = document.getElementById(elementId);
scrollTopSmooth(wrapper, targetMonth, 800, "ease-in-out");
},
async setCalendarData(config = {}) {
this.hideSomeDaysForInitialView = config.hideSomeDaysForInitialView;
const hideSecondMonth = config.hideSecondMonth;
const direction = config.calendarViewDirection;
const monthsAfterToLoadOffset = 12;
const monthsBeforeToLoadOffset = 36;
config.initialShopTimeSlotsResponse.days.forEach((selectableDate) => {
this.selectableDatesData.push(selectableDate);
});
// GENERATE MONTHS AND PUSH THEM INTO ARRAY
const months = [];
if (this.calendarViewDirection === "future") {
const options = {
calendarViewDirection: direction,
monthsBeforeToLoadOffset: monthsBeforeToLoadOffset,
monthsAfterToLoadOffset: monthsAfterToLoadOffset,
initialViewStartDate: config.initialViewStartDate,
initialViewEndDate: config.initialViewEndDate,
hideSecondMonth: hideSecondMonth,
};
if (direction === "future") {
// first 0, then 1
for (let i = 0; i <= this.monthsAfterToLoadOffset; i++) {
months.push(this.getMonthData(i));
for (let i = 0; i <= monthsAfterToLoadOffset; i++) {
months.push(await this.getMonthData(i, options));
}
} else if (this.calendarViewDirection === "past") {
} else if (direction === "past") {
// first 0, then -1
for (let i = 0; i >= 0 - this.monthsAfterToLoadOffset; i--) {
months.unshift(this.getMonthData(i));
for (let i = 0; i >= 0 - monthsBeforeToLoadOffset; i--) {
months.unshift(this.getMonthData(i, options));
}
} else {
// TK - IF A CALENDAR WITH BOTH PAST AND FUTURE WAS EVER NEEDED
// for (let i = this.monthsAfterToLoadOffset; i >= this.monthsBeforeToLoadOffset; i--) {
// TODO - IF A CALENDAR WITH BOTH PAST AND FUTURE WAS EVER NEEDED
// for (let i = monthsAfterToLoadOffset; i >= monthsBeforeToLoadOffset; i--) {
// months.push(this.getMonthDataPAST(i));
// }
}
this.calendarData = months;
this.months = months;
this.isLoading = false;
},
getMonthData(offset) {
const direction = this.calendarViewDirection; // "past" or "future"
let yearNum;
let monthIndex;
async getMonthData(offset = requiredParameter(), options) {
/* options will contain:
calendarViewDirection (string)
initialViewStartDateNum (number)
initialViewEndDateNum (number)
monthsBeforeToLoadOffset (number),
monthsAfterToLoadOffset (number),
hideSecondMonth (boolean),
data used:
todayDate (date object)
this.hideSomeDaysForInitialView (string)
*/
let monthIndex = this.todayMonthIndex + offset; // mutable
let yearNum = this.todayYearNum; // mutable
const calendarViewDirection = options.calendarViewDirection;
const initialViewStartDate = options.initialViewStartDate;
const initialViewEndDate = options.initialViewEndDate;
const hideSecondMonth = options.hideSecondMonth; // <<<<<<<<<<<<<
const dates = [];
let monthClass = "";
let initialViewEndDate; // only used for setCalendarData FUTURE
let initialViewStartDate; // only used for setCalendarData PAST
let currentWeekEndDateNum; // only used for setCalendarData PAST
let currentWeekStartDateNum; // only used for setCalendarData FUTURE
let firstMonthDayTally; // only used for setCalendarData on 1st month generated
const datesArray = [];
const todayDateNum = this.todayDate.getDate();
let isMonthThatHidesSomeDaysForInitialView;
if (typeof offset !== "undefined") {
// offset only passed during initial setup with setCalendarData
yearNum = this.todayDate.getFullYear();
monthIndex = this.todayDate.getMonth() + offset;
if (direction === "future" && offset > 0) {
while (monthIndex > 11) {
monthIndex = monthIndex - 12;
yearNum++;
}
} else if (direction === "past" && offset < 0) {
while (monthIndex < 0) {
monthIndex = 12 + monthIndex;
yearNum--;
}
if (calendarViewDirection === "future" && offset > 0) {
while (monthIndex > 12) {
monthIndex = monthIndex - 12;
yearNum++;
}
} else {
// used only when adding an additional month
if (direction === "future") {
// get last day of current calendar data
const lastMonthInCalendarData = this.calendarData[this.calendarData.length - 1];
if (lastMonthInCalendarData.monthIndex === 11) {
monthIndex = 0;
yearNum = lastMonthInCalendarData.yearNum + 1;
} else {
monthIndex = lastMonthInCalendarData.monthIndex + 1;
yearNum = lastMonthInCalendarData.yearNum;
}
}
if (direction === "past") {
// get last day of current calendar data
const firstMonthInCalendarData = this.calendarData[0];
if (firstMonthInCalendarData.monthIndex === 0) {
monthIndex = 11;
yearNum = firstMonthInCalendarData.yearNum - 1;
} else {
monthIndex = firstMonthInCalendarData.monthIndex - 1;
yearNum = firstMonthInCalendarData.yearNum;
}
} else if (calendarViewDirection === "past" && offset < 0) {
while (monthIndex < 1) {
monthIndex = 12 + monthIndex;
yearNum--;
}
}
const todayDayIndex = this.todayDate.getDay(); // get day of week index of today (0-6)
currentWeekStartDateNum =
todayDayIndex > todayDateNum ? 1 : todayDateNum - todayDayIndex; // FUTURE
const monthEndDate = new Date(yearNum, monthIndex + 1, 0); // BOTH
let monthEndDateNum = monthEndDate.getDate(); // BOTH
currentWeekEndDateNum = todayDateNum + 6 - todayDayIndex; // PAST, aka Sat. (ok if it's larger than the month end?)
if (offset === 0 && direction === "past" && monthEndDateNum > currentWeekEndDateNum)
monthEndDateNum = currentWeekEndDateNum; // PAST
const monthEndDate = new Date(yearNum, monthIndex, 0);
let monthEndDateNum = monthEndDate.getDate();
if (
offset === 0 &&
calendarViewDirection === "past" &&
monthEndDateNum > this.currentWeekEndDateNum
) {
monthEndDateNum = this.currentWeekEndDateNum;
}
const monthStartDateNum =
offset === 0 && direction === "future" ? currentWeekStartDateNum : 1; // FUTURE
const monthStartDate = new Date(yearNum, monthIndex, monthStartDateNum); // BOTH
const startDateDayIndex = monthStartDate.getDay(); // FUTURE
const endDateDayIndex = monthEndDate.getDay(); // PAST
offset === 0 && calendarViewDirection === "future"
? this.currentWeekStartDateNum
: 1;
const monthStartDate = new Date(yearNum, monthIndex - 1, monthStartDateNum);
if (typeof offset !== "undefined") {
if (offset === 0 && direction === "future")
firstMonthDayTally = monthStartDateNum - startDateDayIndex; // FUTURE (starts low, counts up)
if (offset === 0 && direction === "past")
firstMonthDayTally = currentWeekEndDateNum; // PAST (starts high, counts down)
const startDateDayIndex = monthStartDate.getDay();
const endDateDayIndex = monthEndDate.getDay();
while (
direction === "future" &&
offset === 0 &&
firstMonthDayTally < monthEndDateNum
) {
// FUTURE
firstMonthDayTally = firstMonthDayTally + 7;
this.initialViewRowsTally++;
}
while (
direction === "past" &&
offset === 0 &&
firstMonthDayTally > monthStartDateNum
) {
// PAST
firstMonthDayTally = firstMonthDayTally - 7;
this.initialViewRowsTally++;
}
if (Math.abs(offset) === 1) {
if (this.initialViewRowsTally < this.initialViewRowsToShow) {
initialViewEndDate = 6 - startDateDayIndex + monthStartDateNum; // FUTURE
initialViewStartDate = monthEndDateNum - endDateDayIndex; // PAST
this.initialViewRowsTally++;
} else {
monthClass = monthClass + " month-hidden";
}
while (this.initialViewRowsTally < this.initialViewRowsToShow) {
initialViewEndDate = initialViewEndDate + 7;
initialViewStartDate = initialViewStartDate - 7;
this.initialViewRowsTally++;
}
}
if (Math.abs(offset) === 1 && hideSecondMonth) {
monthClass = monthClass + " month-hidden";
} else if (Math.abs(offset) > 1) {
monthClass = monthClass + " month-hidden";
}
if (
Math.abs(offset) === options.monthsAfterToLoadOffset &&
calendarViewDirection === "future"
) {
monthClass = monthClass + " last-available-month";
}
if (
Math.abs(offset) === options.monthsBeforeToLoadOffset &&
calendarViewDirection === "past"
) {
// TODO - re-check this logic if past direction
monthClass = monthClass + " last-available-month";
}
if (this.selectableDates === "custom") {
const monthStart = {
year: yearNum,
month: monthIndex + 1,
date: offset === 0 ? todayDateNum : monthStartDateNum,
};
const monthEnd = {
year: monthEndDate.getFullYear(),
month: monthEndDate.getMonth() + 1,
date: monthEndDateNum,
};
// get available dates
this.updateSelectableDates(monthStart, monthEnd);
}
// populate datesArray
// populate dates array
for (let i = monthStartDateNum; i <= monthEndDateNum; i++) {
let dayClasses = "";
const thisDate = {
// NOTE: uses monthNum (1-based), NOT monthIndex (0-based)
year: yearNum,
month: monthIndex + 1,
date: i,
};
if (offset === 0 && i === todayDateNum) {
const dateString =
yearNum.toString() +
"-" +
forceTwoDigitString(monthIndex) +
"-" +
forceTwoDigitString(i);
if (offset === 0 && i === this.todayDateNum) {
dayClasses += "current-day";
}
if (offset === 0 && i < todayDateNum && direction === "future") {
if (offset === 0 && i < this.todayDateNum && calendarViewDirection === "future") {
dayClasses += "unavailable-day";
}
if (offset === 0 && i > todayDateNum && direction === "past") {
if (offset === 0 && i > this.todayDateNum && calendarViewDirection === "past") {
dayClasses += "unavailable-day";
}
if (Math.abs(offset) === 1 && direction === "future" && i > initialViewEndDate) {
if (
this.hideSomeDaysForInitialView &&
initialViewEndDate.getMonth() + 1 === monthIndex &&
initialViewEndDate.getDate() < i
) {
dayClasses += "day-hidden";
}
if (Math.abs(offset) === 1 && direction === "past" && i < initialViewStartDate) {
dayClasses += "day-hidden";
}
if (this.selectableDates === "custom" && this.isSelectableDate(thisDate)) {
dayClasses += " selectable-day";
isMonthThatHidesSomeDaysForInitialView = true;
}
const dateObject = {
dateNum: i,
dayClasses: dayClasses,
inputValue: thisDate,
inputValue: dateString,
isSelectable:
this.selectableDatesData.findIndex((date) => date.date === dateString) > -1
? true
: false,
};
datesArray.push(dateObject);
dates.push(dateObject);
}
const monthToAdd = {
monthLabel: monthsOfYear[monthIndex],
monthLabel: MONTHS_OF_YEAR[monthIndex - 1],
monthIndex: monthIndex,
monthString: MONTHS_OF_YEAR[monthIndex - 1] + "-" + yearNum?.toString(),
yearNum: yearNum,
dates: datesArray,
dates: dates,
startDateDayIndex: startDateDayIndex,
monthClass: monthClass,
isMonthThatHidesSomeDaysForInitialView: isMonthThatHidesSomeDaysForInitialView,
};
return monthToAdd;
},
addMonthData() {
const monthToAdd = this.getMonthData();
if (this.calendarViewDirection === "future") {
this.calendarData.push(monthToAdd);
}
if (this.calendarViewDirection === "past") {
this.calendarData.unshift(monthToAdd);
}
},
isSelectableDate(thisDate) {
const testForDate = (dateInArray) => {
return (
dateInArray.date === thisDate.date &&
dateInArray.month === thisDate.month &&
dateInArray.year === thisDate.year
async showAnotherMonth() {
this.isLoading = true;
let monthToShow;
let monthStartDateNum = 0;
if (this.hideSomeDaysForInitialView) {
monthToShow = this.months.find(
({ isMonthThatHidesSomeDaysForInitialView }) =>
isMonthThatHidesSomeDaysForInitialView
);
};
const isSelectable =
this.selectableDatesData.findIndex(testForDate) > -1 ? true : false;
return isSelectable;
// find the first day-hidden to become the next api call start date
monthStartDateNum =
monthToShow.dates.find(({ dayClasses }) => dayClasses.includes("day-hidden"))
.dateNum - 1; // TRY 2
} else {
if (this.calendarViewDirection === "future") {
monthToShow = this.months.find((month) =>
month.monthClass.includes("month-hidden")
);
}
if (this.calendarViewDirection === "past") {
// TODO: UPDATE THIS WITH CORRECT PAST LOOKING LOGIC
monthToShow = this.months.find((month) =>
month.monthClass.includes("month-hidden")
);
}
}
if (monthToShow) {
// make new API call with this month's start and end dates
await this.updateSelectableDates(
monthToShow.dates[monthStartDateNum].inputValue,
monthToShow.dates[monthToShow.dates.length - 1].inputValue
);
this.isLoading = false;
this.hideSomeDaysForInitialView = false; // if hid days on initial partial view, this will reveal those days
monthToShow.monthClass = monthToShow.monthClass.replace(" month-hidden", "");
this.scrollToElement(monthToShow.monthString);
if (monthToShow.monthClass.includes("last-available-month"))
this.disableViewMoreDatesButton = true;
}
},
updateSelectableDates(monthStart, monthEnd) {
this.customSelectableDatesCallback(monthStart, monthEnd)?.forEach((newObj) => {
async updateSelectableDates(monthStart, monthEnd) {
const moreSelectableDates = await this.customSelectableDatesCallback(
monthStart,
monthEnd,
this.$store.getters.order.serviceLocation.appointmentType,
this.$store.getters.order.serviceLocation.provider.providerNumber
);
moreSelectableDates.days.forEach((selectableDate) => {
const index = this.selectableDatesData.findIndex(
(obj) =>
obj.year === newObj.year &&
obj.month === newObj.month &&
obj.date === newObj.date
(dateObj) => dateObj.date === selectableDate.date
);
if (index === -1) this.selectableDatesData.push(newObj);
if (index === -1) this.selectableDatesData.push(selectableDate.date);
this.months.forEach((month) => {
// TODO: avoid checking all calendar dates; maybe only ones between monthStart and monthEnd as defined above?
month.dates.forEach((date) => {
if (date.inputValue === selectableDate.date) {
date["isSelectable"] = true;
}
});
});
});
},
},
components: {
loader,
},
};
</script>
<style lang="scss" scoped>
.date-picker-hidden {
opacity: 0;
max-height: 0;
}
.date-picker {
overflow: hidden;
position: relative;
height: 100%;
fieldset {
overflow-y: auto;
height: 88%;
position: relative;
}
.loader {
position: absolute;
height: 2rem;
width: 2rem;
&::after {
width: 100%;
height: 100%;
}
}
.calendar-grid-container {
margin: 0 auto;
margin: 0 auto 2rem auto;
max-width: 414px;
transition: height ease 2s, opacity ease 2s;
display: grid;
grid-template-columns: repeat(7, 1fr);
justify-content: center;
align-items: center;
padding: 4px;
padding: 0 0.75rem;
opacity: 1;
.grid-item {
text-align: center;
margin: 10%;
margin: 10px 3px;
&.first-day-,
&.first-day-0 {
@ -409,6 +652,12 @@ export default {
}
}
.separator-line {
grid-area: 2/1/2/8;
border-top: 1px solid $gray-500;
margin: 0.75rem 0;
}
.month-year {
grid-area: 1 / 1 / 2 / 5;
text-transform: uppercase;
@ -436,6 +685,9 @@ export default {
justify-content: center;
align-items: center;
outline: none;
height: 1.35rem;
opacity: 1;
transition: height ease 250ms, opacity ease 250ms;
input[type="radio"] {
position: absolute; //override bootstrap
@ -495,9 +747,9 @@ export default {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
min-width: 40px;
width: 36px;
height: 36px;
min-width: 36px;
border-radius: 50%;
span {
@ -567,19 +819,36 @@ export default {
}
}
&.initial-view {
&.month-hidden {
display: none;
}
&.partial-month-initial-view {
.day-hidden {
display: none;
opacity: 0;
overflow: hidden;
display: flex;
margin: 0;
max-height: 0;
}
}
&.month-hidden {
opacity: 0;
max-height: 0;
margin-bottom: 0;
}
&.last-available-month:not(&.month-hidden) {
margin-bottom: 14rem;
}
}
#bottom-spacer {
height: 20rem;
background: lightblue;
}
.btn-link {
font-weight: 500;
text-underline-offset: 4px;
position: absolute;
top: 90%;
}
.past {
.calendar-grid-container {
.month-year {
@ -637,4 +906,16 @@ export default {
}
}
}
.btn-link {
display: block;
position: relative;
height: 3rem;
width: 100%;
justify-content: center;
background: transparent;
border: none;
font-weight: 500;
text-underline-offset: 4px;
z-index: 2;
}
</style>

26
src/digital-components/date-picker/mixins/constants.js Normal file
View file

@ -0,0 +1,26 @@
const TIMINGFUNC_MAP = {
linear: (t) => t,
"ease-in": (t) => t * t,
"ease-out": (t) => t * (2 - t),
"ease-in-out": (t) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t),
};
const BUFFER_OFFSET = 10;
const MONTHS_OF_YEAR = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
const DAYS_OF_WEEK = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
export { TIMINGFUNC_MAP, BUFFER_OFFSET, MONTHS_OF_YEAR, DAYS_OF_WEEK };

15
src/digital-components/date-picker/mixins/helpers.js Normal file
View file

@ -0,0 +1,15 @@
const selectableDaysOptions = Object.freeze({
CUSTOM: "custom",
PAST: "past",
});
const requiredParameter = () => {
throw new Error("parameter is required");
};
const forceTwoDigitString = (monthNum) => {
const newString = monthNum.toString();
return newString.length === 1 ? "0" + newString : newString;
};
export { selectableDaysOptions, requiredParameter, forceTwoDigitString };

2
src/digital-components/text-block/text-block.spec.js
View file

@ -1,7 +1,7 @@
import { shallowMount } from "@vue/test-utils";
import TextBlock from "./text-block";
describe("modal.vue", () => {
describe("text-block.vue", () => {
it("Should display 'Text' when 'Text' is defined in the CMS", async () => {
// Act
const wrapper = shallowMount(TextBlock, {

79
src/digital-components/text-block/text-block.vue
View file

@ -1,46 +1,93 @@
<template>
<div
class="text-block w-100"
:class="[justifyText, typeStyle, fontWeight, margin]"
v-html="this.TextBlockCopy"></div>
<div class="text-block w-100" :class="[justifyText, typeStyle, fontWeight, marginTopClass]">
<span v-for="copy in splitCopyOnCMSPlaceHolder(this.textBlockCopy)" :key="copy">
<span v-if="doesCopyContainRouterLink(copy)">
<router-link
:to="{
query: { [pageQueryString]: `${getRouterLinkRouteFromCopy(copy)}` },
name: 'root',
}"
>{{ getRouterLinkDisplayTextFromCopy(copy) }}</router-link
>
</span>
<span v-else-if="doesCopyContainTextLink(copy)">
<textLink
linkType="text"
:text="getRouterLinkDisplayTextFromCopy(copy)"
href="#!"
@click-event="$emit('textLinkClicked', getRouterLinkRouteFromCopy(copy))"
:data-bs-target="'#' + getRouterLinkRouteFromCopy(copy)"
aria-label="Modal window" />
</span>
<span v-else v-html="copy"></span>
</span>
</div>
</template>
<script>
// Components
import textLink from "@/ux-components/text-link/text-link";
// Supporting files
import {
doesCopyContainRouterLink,
doesCopyContainTextLink,
splitCopyOnCMSPlaceHolder,
getRouterLinkRouteFromCopy,
getRouterLinkDisplayTextFromCopy,
} from "@/helpers/cms-content-helper";
import { applicationConfig } from "@/constants/application-config";
export default {
name: "textBlock",
props: {
customText: String, // used to allow the insert of token values into textblock
justifyText: String, // left, right, center
margin: {
// bootstrap margin to apply to the block.
type: String,
default: "mt-2",
},
justifyText: String, // right, center (left is default)
typeStyle: String, // h1-h6, body, small, label, caption (see Figma or Confluence documentation)
fontWeight: String, // bold=500, default is 400
cmsWidgetName: String,
marginTopSizeOverride: Number, // override mt-2 with a bootstrap size from 0-5 or auto
},
methods: {
doesCopyContainRouterLink,
doesCopyContainTextLink,
splitCopyOnCMSPlaceHolder,
getRouterLinkRouteFromCopy,
getRouterLinkDisplayTextFromCopy,
},
computed: {
TextBlockCopy() {
pageQueryString() {
return applicationConfig.PAGE_QUERYSTRING;
},
textBlockCopy() {
if (this.customText) {
return this.customText;
}
return this.getCmsContent(this.cmsWidgetName, "Text");
},
marginTopClass() {
if (this.marginTopSizeOverride === "auto") {
return "mt-auto";
}
if (this.marginTopSizeOverride >= 0 && this.marginTopSizeOverride <= 5) {
return "mt-" + this.marginTopSizeOverride;
}
return "mt-2";
},
},
components: {
textLink,
},
};
</script>
<style lang="scss" scoped>
.text-block {
&.left {
justify-content: flex-start;
}
&.right {
justify-content: flex-end;
text-align: right;
}
&.center {
justify-content: center;
text-align: center;
}
&.bold {
font-weight: 500;

11
src/global-methods.js
View file

@ -60,17 +60,24 @@ export default {
},
/* istanbul ignore next */
callMockHttpClient({ method, endpoint }) {
callMockHttpClient({ method, endpoint, payload }) {
// For Mock use only!
return new Promise((resolve, reject) => {
axios({
method: method,
url: endpoint,
crossDomain: true,
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
responseType: {},
data: payload,
}).then(
(response) => {
resolve(response);
// simulate a delayed response
setTimeout(() => {
resolve(response);
}, 2000);
},
(error) => {
return reject(error.response);

4
src/helpers/cms-content-helper.js
View file

@ -1,6 +1,6 @@
import { storeActions } from "@/constants/store-actions.js";
import store from "@/store";
import { dynamicStrings } from "../constants/dynamic-strings";
import { dynamicStrings } from "@/constants/dynamic-strings";
export function fetchCmsContentForPage(fmgPage) {
return store.dispatch(storeActions.GET_PAGE_DATA, { pageName: fmgPage }).then((response) => {
@ -284,7 +284,7 @@ function getIfStatementRegexExpression() {
//////////////////////////////////////////
export function doesCopyContainRouterLink(copy) {
return copy.includes(this.dynamicStrings.ROUTER_LINK);
return copy.includes(dynamicStrings.ROUTER_LINK);
}
export function doesCopyContainTextLink(copy) {

81
src/helpers/object-helper.js Normal file
View file

@ -0,0 +1,81 @@
// For nested objects, spread operator only creates new references to the top level fields,
// the remaining nested fields actually reference the original object which can introduce problems.
// The purpose of this method is to deep clone the data in an object recursively, this is useful
// for cloning modelValues to internal models when regular two-way binding is not an option.
// See: mobile-location-modal-questions.vue
// Creates a deep clone of an object. Clones primitives, arrays and objects, excluding class instances.
// https://www.30secondsofcode.org/js/s/deep-clone
export function deepClone(object) {
if (object === null) {
return null;
}
let clone = Object.assign({}, object);
Object.keys(clone).forEach(
(key) =>
(clone[key] = typeof object[key] === "object" ? deepClone(object[key]) : object[key])
);
if (Array.isArray(object)) {
clone.length = object.length;
return Array.from(clone);
}
return clone;
}
// The purpose of this method is to check for array or object equality recursively to determine if two complex objects are equal.
// This is only a comparison of data, not functions.
export function deepEqual(obj1, obj2) {
if (typeof obj1 !== typeof obj2) {
return false;
}
if (obj1 === null || obj2 === null) {
return obj1 === obj2;
}
if (Array.isArray(obj1) && Array.isArray(obj2)) {
if (obj1.length !== obj2.length) {
return false;
}
const sorted1 = obj1.slice().sort();
const sorted2 = obj2.slice().sort();
for (let i = 0; i < sorted1.length; i++) {
if (!deepEqual(sorted1[i], sorted2[i])) {
return false;
}
}
return true;
}
if (typeof obj1 === "object" && typeof obj2 === "object") {
const keys1 = Object.keys(obj1);
const keys2 = Object.keys(obj2);
if (keys1.length !== keys2.length) {
return false;
}
const sortedKeys1 = keys1.sort();
const sortedKeys2 = keys2.sort();
for (let i = 0; i < sortedKeys1.length; i++) {
const key1 = sortedKeys1[i];
const key2 = sortedKeys2[i];
if (key1 !== key2 || !deepEqual(obj1[key1], obj2[key2])) {
return false;
}
}
return true;
}
return obj1 === obj2;
}

275
src/helpers/object-helper.spec.js Normal file
View file

@ -0,0 +1,275 @@
import { deepClone, deepEqual } from "./object-helper";
describe("object-cloning-helper.js", () => {
describe("deepClone", () => {
it("Should return null if no object is passed in", async () => {
// Arrange
const expected = null;
// Act
const result = deepClone(null);
// Assert
expect(result).toEqual(expected);
});
it("Should return a deep copy of the object", async () => {
// Arrange
const object = {
addressQuestions: {
streetAddress: "555 Some St",
apartmentNumberOrBusinessName: "Apt 1",
city: "Funkytown",
state: "OH",
zipCode: "55555",
},
isVehicleProtected: true,
serviceZipCode: "55555",
};
const expected = {
addressQuestions: {
streetAddress: "555 Some St",
apartmentNumberOrBusinessName: "Apt 1",
city: "Funkytown",
state: "OH",
zipCode: "55555",
},
isVehicleProtected: true,
serviceZipCode: "55555",
};
// Act
const result = deepClone(object);
// Assert
expect(result).toStrictEqual(expected);
});
it("Should return a copy of the array", async () => {
// Arrange
const array = [9, 8, 7, 6, 5, 4, 3, 2, 1];
const expected = [9, 8, 7, 6, 5, 4, 3, 2, 1];
// Act
const result = deepClone(array);
// Assert
expect(result).toStrictEqual(expected);
});
});
describe("deepEqual", () => {
it("Should return false if the items being compared are not the same type", async () => {
// Arrange
const obj1 = ""; // String
const obj2 = 3; // Number
const expected = false;
// Act
const result = deepEqual(obj1, obj2);
// Assert
expect(result).toEqual(expected);
});
it("Should return false if one the items being compared is null", async () => {
// Arrange
const obj1 = {}; // Object
const obj2 = null; // Array
const expected = false;
// Act
const result = deepEqual(obj1, obj2);
// Assert
expect(result).toEqual(expected);
});
describe("Both items being compared are arrays", () => {
it("Should return true if the two arrays have the same elements in the same order", async () => {
// Arrange
const obj1 = [1, 2, 3]; // Array
const obj2 = [1, 2, 3]; // Array
const expected = true;
// Acts
const result = deepEqual(obj1, obj2);
// Assert
expect(result).toEqual(expected);
});
it("Should return true if the two arrays have the same elements in a different order", async () => {
// Arrange
const obj1 = [1, 2, 3]; // Array
const obj2 = [3, 1, 2]; // Array
const expected = true;
// Acts
const result = deepEqual(obj1, obj2);
// Assert
expect(result).toEqual(expected);
});
it("Should return false if the two arrays are not the same length", async () => {
// Arrange
const obj1 = [1, 2, 3]; // Array
const obj2 = [1, 2]; // Array
const expected = false;
// Acts
const result = deepEqual(obj1, obj2);
// Assert
expect(result).toEqual(expected);
});
it("Should return false if they have the same elements but their the array elements are different", async () => {
// Arrange
const obj1 = [1, 2, 3]; // Array
const obj2 = [4, 5, 6]; // Array
const expected = false;
// Acts
const result = deepEqual(obj1, obj2);
// Assert
expect(result).toEqual(expected);
});
});
describe("Both items being compared are objects", () => {
it("Should return false if the two objects *do not* have the same number of keys", async () => {
// Arrange
const obj1 = {
prop1: {},
}; // Object
const obj2 = {
prop1: {},
prop2: {},
}; // Object
const expected = false;
// Acts
const result = deepEqual(obj1, obj2);
// Assert
expect(result).toEqual(expected);
});
it("Should return true if the two objects have the same keys in the same order", async () => {
// Arrange
const obj1 = {
prop1: {},
prop2: {},
}; // Object
const obj2 = {
prop1: {},
prop2: {},
}; // Object
const expected = true;
// Acts
const result = deepEqual(obj1, obj2);
// Assert
expect(result).toEqual(expected);
});
it("Should return true if the two objects have the same keys in a different order", async () => {
// Arrange
const obj1 = {
prop1: {},
prop2: {},
}; // Object
const obj2 = {
prop2: {},
prop1: {},
}; // Object
const expected = true;
// Acts
const result = deepEqual(obj1, obj2);
// Assert
expect(result).toEqual(expected);
});
it("Should return false if the two objects have the same keys but in a nested object comparison one of the two values is null", async () => {
// Arrange
const obj1 = {
prop1: {
subProp1: {
foo: "",
bar: null,
},
},
prop2: {
subProp1: [1, 2, 3],
},
}; // Object
const obj2 = {
prop1: {},
prop2: {},
}; // Object
const expected = false;
// Acts
const result = deepEqual(obj1, obj2);
// Assert
expect(result).toEqual(expected);
});
it("Should return false if the two objects have the same elements but a nested object comparison is of two different types", async () => {
// Arrange
const obj1 = {
prop1: {
subProp1: {
foo: "",
bar: "",
},
},
prop2: {
subProp1: [1, 2, 3],
},
}; // Object
const obj2 = {
prop1: {
subProp1: {
foo: "",
bar: "",
},
},
prop2: {
subProp1: {
foo1: "",
bar1: "",
},
},
}; // Object
const expected = false;
// Acts
const result = deepEqual(obj1, obj2);
// Assert
expect(result).toEqual(expected);
});
});
});
});

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

@ -20,19 +20,12 @@
validationRules="vehicle-required"
v-model="selectedVehicleVin"
:isCarIdDifferent="isCarIdDifferent" />
<div class="alert-provide-vin my-3" v-if="splitAlertProvideVinBodyForLink.length">
<span v-for="copy in splitAlertProvideVinBodyForLink" :key="copy">
<span v-if="doesCopyContainRouterLink(copy)" class="text-body">
<router-link
:to="{
query: { fmgPage: `${getRouterLinkRouteFromCopy(copy)}` },
name: 'root',
}"
>{{ getRouterLinkDisplayTextFromCopy(copy) }}</router-link
>
</span>
<span v-else class="m-0 text-body" v-html="copy"></span>
</span>
<div class="alert-provide-vin" v-if="splitAlertProvideVinBodyForLink.length">
<textBlock
:customText="AlertProvideVinBody"
justifyText="left"
class="mb-3"
marginTopSizeOverride="3" />
</div>
<funnelFooter
cmsWidgetName="FunnelFooterWidget"
@ -52,6 +45,7 @@ import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
import alert from "@/ux-components/alert/alert";
import addressVehiclesQuestion from "@/layouts/address-vehicles/address-vehicles-question/address-vehicles-question";
import textBlock from "@/digital-components/text-block/text-block";
// Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@ -237,6 +231,7 @@ export default {
alert,
funnelFooter,
addressVehiclesQuestion,
textBlock,
},
};
</script>

19
src/layouts/demo-date-picker/demo-date-picker.spec.js
View file

@ -1,19 +0,0 @@
import demoDatePicker from "./demo-date-picker";
// Supporting Files
import { shallowMount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
describe("demo-date-picker.vue", () => {
test.only("test TK...", () => {});
});
function setupMocks({ mountOptionsMockData = {} }) {
const mountOptions = getMountOptions({
...mountOptionsMockData,
});
const wrapper = shallowMount(demoDatePicker, mountOptions);
return { wrapper };
}

83
src/layouts/demo-date-picker/demo-date-picker.vue
View file

@ -1,83 +0,0 @@
<template>
<div class="page-container-grouped-styles">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<div class="select-car">
<div class="select-car-form rounded text-center">
<div class="fade-on-route-transition">
<date-picker
selectableDates="custom"
v-model="selectedDate"
:customSelectableDatesCallback="getAvailableDates" />
<!-- EXAMPLE THAT OVERRIDES TODAY BY PASSING STRING --
<date-picker
selectableDates="custom"
v-model="selectedDate"
:customSelectableDatesCallback="getAvailableDates"
todayOverrideDateString="2022-12-30T03:00:00" /> -->
</div>
</div>
</div>
</div>
</template>
<script>
// Components
import datePicker from "@/digital-components/date-picker/date-picker";
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
// Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import { storeActions } from "@/constants/store-actions";
import store from "@/store";
import baseMixin from "@/mixins/base-mixin";
export default {
name: "demo-date-picker",
data() {
return {
selectedDate: null,
// selectedDate: { // USE THIS FORMAT FOR A PRE-SELECTED DATE ON LOAD
// year: 2023,
// month: 3, // use 1-based index for months
// date: 21,
// },
mockSelectableDatesData: [
{ year: 2023, month: 3, date: 4 },
{ year: 2023, month: 3, date: 5 },
{ year: 2023, month: 3, date: 22 },
{ year: 2023, month: 4, date: 13 },
{ year: 2023, month: 4, date: 14 },
{ year: 2023, month: 4, date: 26 },
{ year: 2023, month: 5, date: 21 },
{ year: 2023, month: 5, date: 23 },
{ year: 2023, month: 5, date: 25 },
],
};
},
computed: {
todayDate() {
const today = new Date();
return today.toDateString();
},
},
methods: {
arePagePrerequisitesValid() {
return true;
},
getAvailableDates(startDate, endDate) {
this.mockSelectableDatesData.push(endDate);
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// temporary test method that adds endDate to list of selectable dates
return this.mockSelectableDatesData;
},
},
components: {
datePicker,
funnelHeader,
},
};
</script>

2
src/layouts/estimate/estimate.vue
View file

@ -229,7 +229,7 @@ export default {
const zipCodeData = await this.getZipCodeData(this.serviceZipCode);
await this.dispatchStoreAction(storeActions.SAVE_EMAIL, this.emailAddress, false);
await this.dispatchStoreAction(
storeActions.SAVE_SERVICE_LOCATION,
storeActions.SAVE_SERVICE_ZIP_CODE_INFO,
{
zipCode: this.serviceZipCode,
state: zipCodeData.state,

2
src/layouts/molding-questions/molding-questions.spec.js
View file

@ -109,7 +109,7 @@ store.getters = {
damage: baseStoreGettersDamage,
order: {},
};
store.commit = jest.fn();
store.dispatch = jest.fn();
afterEach(() => {
// reset store after each test

7
src/layouts/quote/cash-or-insurance-question/cash-or-insurance-question.vue
View file

@ -5,7 +5,7 @@
:groupName="groupName"
buttonTypeString="listButtonHorizontal"
v-model="selectedValues"
additionalButtonStyling="listButtonHorizontalStrong"
:additionalButtonData="additionalButtonData"
isRequired />
</div>
</template>
@ -27,6 +27,11 @@ export default {
answersFromCms() {
return this.getCmsContent(this.cmsWidgetName, "Answers");
},
additionalButtonData() {
return {
additionalButtonStyling: "listButtonHorizontalStrong",
};
},
selectedValues: {
get: function () {
// Convert to CMS answer name from bool

6
src/layouts/quote/quote.vue
View file

@ -182,6 +182,7 @@ export default {
this.isInsuranceSelected,
false
);
if (!this.isInsuranceSelected) {
this.dispatchStoreAction(
this.storeActions.SAVE_PARENT_ACCOUNT_NUMBER,
@ -196,18 +197,21 @@ export default {
) {
this.supportingItems = this.filterOutFees(this.supportingItems);
}
if (this.pricedGlassParts.length > 0) {
this.dispatchStoreAction(
this.storeActions.SAVE_GLASS_PARTS,
this.storeActions.SAVE_GLASS_PART_PRICES,
this.pricedGlassParts,
false
);
}
this.dispatchStoreAction(
this.storeActions.SAVE_SUPPORTING_ITEMS,
this.supportingItems,
false
);
this.dispatchStoreAction(this.storeActions.SAVE_VAPS, this.selectedVaps, false);
const payment = this.$store.getters.payment;

3
src/layouts/review/review.spec.js
View file

@ -1,3 +0,0 @@
describe("Review Page", () => {
test.todo("Add more tests as specific functionality is added.");
});

102
src/layouts/review/review.vue
View file

@ -1,102 +0,0 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
<!-- When customer-details is added: v-slot="{ meta }" -->
<div class="page-container-grouped-styles">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<vehicleBanner
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />
<textBlock
:customText="subHeaderTitle"
typeStyle="h5"
justifyText="text-center"
margin="mt-1"
class="dark-header" />
<textBlock
:customText="subHeaderBody"
typeStyle="body"
justifyText="left"
margin="mt-0 mb-2" />
<buttonMain
ref="buttonMain"
isPrimary
:buttonText="forwardButtonText"
loaderColor="white"
@click-event="forwardButtonAction" />
<funnelFooter
cmsWidgetName="FunnelFooterWidget"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
</div>
</Form>
</template>
<script>
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
import buttonMain from "@/ux-components/button-main/button-main";
import textBlock from "@/digital-components/text-block/text-block";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
export default {
name: "review",
async beforeRouteEnter(to, from, next) {
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
// Settle promises and get results
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
});
},
data() {
return {};
},
methods: {
arePagePrerequisitesValid() {
return true;
},
backButtonAction() {},
forwardButtonAction() {},
},
computed: {
subHeaderTitle() {
return this.getCmsContent("FunnelSubHeaderWidget", "HeaderText");
},
subHeaderBody() {
return this.getCmsContent("FunnelSubHeaderWidget", "BodyText");
},
forwardButtonText() {
return this.getCmsContent("FunnelFooterWidget", "ForwardButtonText");
},
},
components: {
funnelHeader,
funnelFooter,
vehicleBanner,
buttonMain,
textBlock,
},
};
</script>
<style lang="scss" scoped>
.dark-header {
color: $black;
}
</style>

57
src/layouts/schedule/location-alerts/location-alerts.vue Normal file
View file

@ -0,0 +1,57 @@
<template>
<alert
v-for="alert in prefixedAlertReasons"
:key="alert.cmsWidgetName"
:ref="alert.cmsWidgetName"
class="mt-2 mb-3"
:cmsWidgetName="alert.cmsWidgetName"
alertClass="alert-warning" />
</template>
<script>
import alert from "@/ux-components/alert/alert";
import { getAlertReasons } from "@/layouts/schedule/helpers/schedule-helper";
export default {
name: "locationAlerts",
data() {
return {
alertReasons: [],
};
},
props: {
cmsWidgetPrefix: {
type: String,
default: "",
},
},
computed: {
prefixedAlertReasons() {
return this.alertReasons.reduce((newObj, alert) => {
newObj.push({
cmsWidgetName: `${this.cmsWidgetPrefix}${alert}`,
alertReason: alert,
});
return newObj;
}, []);
},
},
methods: {
loadInitialData(serviceLocationCtu, providerCtu) {
let ctuToUse = serviceLocationCtu;
if (providerCtu) {
ctuToUse = providerCtu;
}
return getAlertReasons(ctuToUse);
},
initializeComponent(initialData) {
this.alertReasons = initialData;
},
cmsHeadlineTextFound(widgetName) {
return this.getCmsContent(widgetName, "HeadlineText") !== "";
},
},
components: {
alert,
},
};
</script>

400
src/layouts/schedule/schedule.vue
View file

@ -4,35 +4,35 @@
<loadingModal ref="loadingModal" />
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-5" />
<div class="text-center mt-1 mb-3" v-if="ChangeShopLink.length">
<span v-for="copy in ChangeShopLink" :key="copy">
<span v-if="doesCopyContainRouterLink(copy)" class="text-body">
<router-link
:to="{
query: { fmgPage: `${getRouterLinkRouteFromCopy(copy)}` },
name: 'root',
}"
>{{ getRouterLinkDisplayTextFromCopy(copy) }}</router-link
>
</span>
<span v-else class="m-0 text-body" v-html="copy"></span>
</span>
</div>
<template v-if="displayWeatherAlert">
<alert
v-for="alert in weatherAlerts"
v-show="cmsHeadlineTextFound(alert.cmsWidgetName)"
:key="alert.cmsWidgetName"
:ref="alert.cmsWidgetName"
class="mt-2 mb-3"
:cmsWidgetName="alert.cmsWidgetName"
alertClass="alert-warning" />
<template v-if="ChangeShopLink.length">
<textBlock
cmsWidgetName="ChangeShopLink"
justifyText="center"
class="mb-3"
marginTopSizeOverride="1" />
</template>
<location-alerts cmsWidgetPrefix="LocationAlert-" ref="locationAlerts" />
<date-picker
selectableDates="custom"
selectableDatesSetting="custom"
ref="datePicker"
v-model="selectedDate"
:customSelectableDatesCallback="getAvailableDates" />
:customSelectableDatesCallback="getAvailableDatesMethod"
@date-clicked="openInshopTimeSlotsModal" />
<time-slot-modal-question
ref="timeSlotModalQuestion"
cmsWidgetName="TimeSlotModalQuestion"
mobilePremiumCmsWidgetName="MobilePremiumTimeSlotModal"
mobileCmsWidgetName="MobileTimeSlotModal"
dropoffCmsWidgetName="DropOffTimeSlotModal"
sameDayDropOffCmsWidgetName="SameDayDropOffTimeSlotModal"
v-model="selectedTimeSlotData"
@time-slot-modal-closed="timeSlotModalClosed"
:appointmentType="appointmentType"
:premiumAppointmentFee="mobilePremiumAppointmentFee"
:dateAndTimeSlotData="timeSlotsForSelectedDate"
:estimatedServiceMinutesMinimum="selectableDatesData.estimatedServiceMinutesMinimum"
:estimatedServiceMinutesMaximum="selectableDatesData.estimatedServiceMinutesMaximum"
validationRules="time-slot-selection-required" />
<funnel-footer
cmsWidgetName="FunnelFooterWidget"
ref="funnelFooter"
@ -45,57 +45,105 @@
<script>
// Components
import alert from "@/ux-components/alert/alert";
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
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 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";
// Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import baseMixin from "@/mixins/base-mixin.js";
import { storeActions } from "@/constants/store-actions";
import { settleAllPromises } from "@/helpers/layout-helper";
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
import { getAlertReasons } from "@/layouts/schedule/helpers/schedule-helper";
import {
doesCopyContainRouterLink,
splitCopyOnCMSPlaceHolder,
getRouterLinkRouteFromCopy,
getRouterLinkDisplayTextFromCopy,
} from "@/helpers/cms-content-helper";
import { splitCopyOnCMSPlaceHolder } from "@/helpers/cms-content-helper";
import { AppointmentTypeStrings, PREMIUM_FEE_PART_TYPE } from "@/constants/schedule-constants";
import { errorMessages } from "@/constants/error-messages";
import { required } from "@/helpers/validation-rules";
import store from "@/store";
defineRule("date-required", required(errorMessages.DATE_REQUIRED));
defineRule("time-slot-selection-required", required(errorMessages.DATE_REQUIRED));
const getAvailableDates = async (startDate, endDate, appointmentType, providerNumber) => {
// USING DATES PASSED, MAKE AN API CALL
let newTimeSlotsResponse;
if (appointmentType === AppointmentTypeStrings.MOBILE) {
newTimeSlotsResponse = await baseMixin.methods.dispatchStoreAction(
storeActions.GET_MOBILE_TIME_SLOTS,
{
startDate: startDate,
endDate: endDate,
},
false
);
} else {
newTimeSlotsResponse = await baseMixin.methods.dispatchStoreAction(
storeActions.GET_SHOP_TIME_SLOTS,
{
startDate: startDate,
endDate: endDate,
shopAppointmentType: appointmentType,
providerNumber: providerNumber,
},
false
);
}
return newTimeSlotsResponse.data;
};
export default {
name: "schedule",
data() {
return {
selectedDate: null,
weatherAlerts: [],
mockSelectableDatesData: [
{ year: 2023, month: 4, date: 13 },
{ year: 2023, month: 4, date: 14 },
{ year: 2023, month: 4, date: 26 },
{ year: 2023, month: 5, date: 4 },
{ year: 2023, month: 5, date: 5 },
{ year: 2023, month: 5, date: 14 },
{ year: 2023, month: 5, date: 21 },
{ year: 2023, month: 5, date: 23 },
{ year: 2023, month: 5, date: 25 },
{ year: 2023, month: 6, date: 11 },
],
selectedDate: this.getSelectedDate(),
selectedTimeSlotData: {
id: this.getSelectedRouteCode(),
isPremiumAppointment: null,
},
selectableDatesData: [],
mobilePremiumAppointmentFee: null,
};
},
async beforeRouteEnter(to, from, next) {
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
const datePickerInitialDataPromise = datePicker.methods.loadInitialData({
// setup config options for date-picker
selectableDatesSetting: "custom",
initialViewRowsToShow: 5,
customSelectableDatesCallback: getAvailableDates,
});
const alertReasonsPromise = getAlertReasons(store.getters.order.serviceLocation.zipCodeCtu);
const premiumFeePromise = baseMixin.methods.dispatchStoreAction(
storeActions.GET_MOBILE_PREMIUM_FEE
);
const premiumFeeWithPricePromise = premiumFeePromise.then((result) => {
if (result.data) {
return baseMixin.methods.dispatchStoreAction(
storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
{
availableLineItems: [result.data],
},
false
);
} else {
return result.data;
}
});
const alertReasonsPromise = locationAlerts.methods.loadInitialData(
store.getters.order.serviceLocation.zipCodeCtu,
store.getters.order.serviceLocation.provider?.address?.zipCtu
);
// Settle promises and get results
const promiseResultMap = [
{
@ -106,6 +154,14 @@ export default {
resultKey: "alertReasons",
promise: alertReasonsPromise,
},
{
resultKey: "datePickerInitialData",
promise: datePickerInitialDataPromise,
},
{
resultKey: "premiumFeeWithPrice",
promise: premiumFeeWithPricePromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
@ -113,7 +169,13 @@ export default {
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
vm.setData(resultMap.alertReasons);
vm.$refs.datePicker.initializeComponent(resultMap.datePickerInitialData);
vm.$refs.locationAlerts.initializeComponent(resultMap.alertReasons);
vm.selectableDatesData = resultMap.datePickerInitialData.initialShopTimeSlotsResponse;
vm.mobilePremiumAppointmentFee = resultMap.premiumFeeWithPrice
? resultMap.premiumFeeWithPrice[0]
: null;
vm.updateFooterButtonText(vm.selectedTimeSlotData);
});
},
computed: {
@ -124,71 +186,227 @@ export default {
// Splits content when brackets are found in text so that text can be looped through and router-link can be injected when needed
return this.splitCopyOnCMSPlaceHolder(this.ChangeShopLinkText);
},
displayWeatherAlert() {
return this.weatherAlerts.length > 0;
appointmentType() {
return this.$store.getters.order.serviceLocation.appointmentType;
},
timeSlotsForSelectedDate() {
if (!this.selectedDate) {
return null;
}
return this.selectableDatesData.days?.find(
(selectableDate) => selectableDate.date === this.selectedDate
);
},
appointmentDateAndTime() {
if (!this.selectedTimeSlotData.id) {
return null;
}
const timeSlotSelectedObject = this.getTimeSlotObjectFromTimeSlotId(
this.selectedTimeSlotData.id
);
if (timeSlotSelectedObject) {
return {
date: this.selectedDate,
startTime: timeSlotSelectedObject.startTime,
endTime: timeSlotSelectedObject.endTime,
routeCode: this.selectedTimeSlotData.id,
jobMaxMinutes:
this.selectableDatesData.estimatedServiceMinutesMaximum.toString(),
};
} else {
return null;
}
},
},
methods: {
doesCopyContainRouterLink,
splitCopyOnCMSPlaceHolder,
getRouterLinkRouteFromCopy,
getRouterLinkDisplayTextFromCopy,
arePagePrerequisitesValid() {
return true;
// NEED TODO - WHAT ARE PAGE REQ'S FOR THIS PAGE?
const serviceLocation = store.getters.order.serviceLocation;
const serviceLocationPreReqs =
serviceLocation.zipCode &&
serviceLocation.zipCodeCtu &&
serviceLocation.appointmentType &&
(serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE ||
serviceLocation.provider.providerNumber);
const paymentInfo = store.getters.payment.isInsurance !== null;
const supportingItems = store.getters.lineItems.supportingItems !== null;
const damageInfo =
store.getters.order.damage.isRepair ||
(store.getters.order.lineItems?.glassParts != null &&
store.getters.order.lineItems.glassParts.length > 0);
return serviceLocationPreReqs && paymentInfo && supportingItems && damageInfo;
},
setData(alertReasonsData) {
if (alertReasonsData) {
this.convertReasonsToCmsAlerts(alertReasonsData);
}
},
cmsHeadlineTextFound(widgetName) {
return this.getCmsContent(widgetName, "HeadlineText") !== "";
},
convertReasonsToCmsAlerts(data) {
this.weatherAlerts = data.reduce((newObj, alert) => {
newObj.push({
cmsWidgetName: `LocationAlert-${alert}`,
alertReason: alert,
});
return newObj;
}, []);
},
async getWeatherAlertReasons(ctu) {
await getAlertReasons(ctu)
.then((response) => {
if (response.data) {
this.convertReasonsToCmsAlerts(response.data);
}
})
.catch(() => {
console.log("error fetching alert reasons..");
});
},
getAvailableDates(startDate, endDate) {
return this.mockSelectableDatesData;
async getAvailableDatesMethod(startDate, endDate) {
const newShopTimeSlots = await getAvailableDates(
startDate,
endDate,
this.appointmentType,
this.$store.getters.order.serviceLocation.provider.providerNumber
);
// ADD API CALL RESULTS TO EXISTING DATE DATA
this.selectableDatesData.days = this.selectableDatesData.days.concat(
newShopTimeSlots.days
);
return newShopTimeSlots;
},
getServiceZipCtuCodeFromStore() {
return store.getters.order.serviceLocation.zipCodeCtu;
},
openInshopTimeSlotsModal() {
this.$refs["timeSlotModalQuestion"].openModal();
},
getTimeSlotObjectFromTimeSlotId(timeSlotId) {
const timeSlots = this.selectableDatesData.days.find(
(selectableDate) => selectableDate.date === this.selectedDate
).timeSlots;
return timeSlots.find((timeSlot) => timeSlot.id === timeSlotId);
},
getSelectedDate() {
return store.getters.order.schedule.date;
},
getSelectedRouteCode() {
return store.getters.order.schedule.routeCode;
},
timeSlotModalClosed() {
// Clear the selectedDate if no timeSlot has been selected
if (!this.selectedTimeSlotData.id) {
this.selectedDate = null;
}
},
updateFooterButtonText(timeSlotData) {
let funnelFooterButtonText;
if (!timeSlotData.id) {
funnelFooterButtonText = "Continue";
} else {
funnelFooterButtonText =
"Select " + this.convertSelectedDateToShortMonthAndDay(this.selectedDate);
if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
funnelFooterButtonText +=
" at " +
this.getDisplayTextForMilitaryTime(this.appointmentDateAndTime.startTime);
} else if (
this.appointmentType === AppointmentTypeStrings.MOBILE &&
!timeSlotData.isPremiumAppointment
) {
funnelFooterButtonText +=
" at " +
this.getDisplayTextForMilitaryTime(
this.appointmentDateAndTime.startTime,
true
) +
" - " +
this.getDisplayTextForMilitaryTime(
this.appointmentDateAndTime.endTime,
true
);
}
}
this.$refs.funnelFooter.updateButtonText(funnelFooterButtonText);
},
convertSelectedDateToShortMonthAndDay(selectedDate) {
// This conversion ensures we don't get get GMT induced date changes
const dateObject = new Date(`${selectedDate}T00:00:00`);
// Ex: April 25
return dateObject.toLocaleDateString("en-us", { month: "short", day: "numeric" });
},
// Expected input: "HH:MM"
getDisplayTextForMilitaryTime(militaryTimeInput, shouldTrimMinutesIfEmpty = false) {
let hours = parseInt(militaryTimeInput.split(":")[0]);
const minutes = militaryTimeInput.split(":")[1];
const meridianNotation = hours > 11 ? "PM" : "AM";
if (hours > 12) {
hours -= 12;
}
if (shouldTrimMinutesIfEmpty && minutes === "00") {
return `${hours} ${meridianNotation}`;
} else {
return `${hours}:${minutes} ${meridianNotation}`;
}
},
backButtonAction() {
this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
},
forwardButtonAction() {
this.updateSupportingItems();
this.dispatchStoreAction(
this.storeActions.SAVE_SCHEDULE,
this.appointmentDateAndTime,
false
);
navigateToHeritageFunnel({ loadingModal: this.$refs.loadingModal });
},
updateSupportingItems() {
const supportingItems = store.getters.lineItems.supportingItems;
// if we have a premium fee(early bird), then save/update supporting items
if (
this.appointmentType === AppointmentTypeStrings.MOBILE &&
this.selectedTimeSlotData?.isPremiumAppointment
) {
const earlyBirdIndex = supportingItems.findIndex(
(item) => item.partType == PREMIUM_FEE_PART_TYPE
);
if (earlyBirdIndex >= 0) {
supportingItems[earlyBirdIndex].laborAmount =
this.mobilePremiumAppointmentFee.laborAmount;
supportingItems[earlyBirdIndex].selingPrice =
this.mobilePremiumAppointmentFee.selingPrice;
supportingItems[earlyBirdIndex].kitPrice =
this.mobilePremiumAppointmentFee.kitPrice;
} else {
supportingItems.push(this.mobilePremiumAppointmentFee);
}
this.dispatchStoreAction(
this.storeActions.SAVE_SUPPORTING_ITEMS_SUPPRESSING_STATE_RESETTING,
supportingItems,
false
);
} else {
// if it's not a mobile and/or premium early bird, then make sure we remove any that may have been added
const removeEarlyBirdIndex = supportingItems.findIndex(
(item) => item.partType == PREMIUM_FEE_PART_TYPE
);
if (removeEarlyBirdIndex >= 0) {
supportingItems.splice(removeEarlyBirdIndex, 1);
this.dispatchStoreAction(
this.storeActions.SAVE_SUPPORTING_ITEMS_SUPPRESSING_STATE_RESETTING,
supportingItems,
false
);
}
}
},
},
watch: {
selectedDate(newValue, oldValue) {
// Clear time slot selection if date selected changes
if (newValue !== oldValue) {
this.selectedTimeSlotData = {
id: null,
isPremiumAppointment: null,
};
}
},
selectedTimeSlotData(newValue) {
this.updateFooterButtonText(this.selectedTimeSlotData);
},
},
components: {
alert,
funnelHeader,
funnelFooter,
funnelSubHeader,
Form,
loadingModal,
datePicker,
locationAlerts,
timeSlotModalQuestion,
textBlock,
},
mounted() {},
};
</script>
<style lang="scss"></style>

114
src/layouts/schedule/time-slot-modal-question/time-slot-modal-list-button/time-slot-modal-list-button.vue Normal file
View file

@ -0,0 +1,114 @@
<template>
<baseInputButton
v-bind="$props"
buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2"
v-model="selectedValue">
<div
:aria-label="buttonLabel"
class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
<span class="m-0 position-relative" :class="textPosition">
{{ buttonLabel }}
<span
v-if="buttonLabelSubCopy"
class="premium-appointment-price"
:class="textPosition">
{{ formattedButtonLabelSubCopy }}
</span>
</span>
<span v-if="screenReaderOnlyText" class="sr-only">
{{ screenReaderOnlyText }}
</span>
</div>
</baseInputButton>
</template>
<script>
import baseInputButton from "@/digital-components/base-input-button/base-input-button";
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
export default {
name: "timeSlotModalListButton",
mixins: [inputButtonWrapperMixin],
computed: {
formattedButtonLabelSubCopy() {
return this.buttonLabelSubCopy;
},
},
methods: {
displayLoader() {
this.isLoaderDisplayed = true;
},
preHandleAnswerChange() {
if (this.selectingInitiatesLoad) {
this.displayLoader();
}
},
},
components: {
baseInputButton,
},
};
</script>
<style lang="scss" scoped>
.list-button {
outline: none;
input[type="radio"],
input[type="checkbox"] {
position: static; //override bootstrap
&:focus-visible + .list-button-content {
box-shadow: 0 0 0 2.5px $blue;
}
&:focus + .list-button-content {
box-shadow: 0 0 0 2.5px $blue;
}
&:checked + .list-button-content {
color: $black;
font-weight: 500;
background: $blue-100;
box-shadow: 0 0 0 1px $blue;
span.premium-appointment-price {
background: $green-200;
}
}
&:checked:focus + .list-button-content {
box-shadow: 0 0 0 2.5px $blue;
}
&:checked + .list-button-content p,
&:checked + .list-button-content span {
font-weight: 500;
}
&:checked + .list-button-content span:nth-child(2) {
font-weight: 400;
color: $gray-600;
}
}
}
.list-button-content {
color: $gray-600;
position: relative;
background: $white;
transition: all 150ms linear;
border-radius: $border-radius-lg;
border: 1px solid $gray-500;
width: 100%;
outline: none;
span.premium-appointment-price {
position: absolute;
background: $green-100;
border-radius: 4.5rem;
line-height: 1.25rem;
color: $green-700;
font-size: 0.75rem;
margin-left: 4px;
padding: 2px 8px;
font-weight: 500;
}
}
.position-relative {
position: relative;
}
</style>

332
src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue Normal file
View file

@ -0,0 +1,332 @@
<template>
<modal
ref="timeSlots"
class="time-slots-modal"
:headerText="dateSelectedReadableDate"
:footerButtonText="footerCloseButtonText"
:onModalOpenedCallback="onModalOpened"
:onModalClosedCallback="onModalClosed"
@footer-button-event="closeModal">
<textBlock
v-show="durationTextBlockCopy"
:customText="durationTextBlockCopy"
justifyText="center"
typeStyle="small"
class="duration-text-block" />
<buttonQuestion
buttonTypeString="timeSlotModalListButton"
:buttonTypeObject="timeSlotModalListButton"
:answers="availableTimeSlots"
groupName="ChooseTimeSlot"
textPosition="text-center"
v-model="selectedTimeSlotId"
isRequired
validationRules="time-slot-required"
class="mt-5" />
<div
class="mt-1 mb-2 supplemental-information"
v-if="supplementalInformationBlock"
v-html="supplementalInformationBlock"></div>
<textBlock
v-show="shouldShowDropoffDisclaimerText"
:customText="dropoffDisclaimerText"
justifyText="left"
typeStyle="caption"
class="mb-2" />
</modal>
</template>
<script>
// Components
import modal from "@/digital-components/modal/modal";
import textBlock from "@/digital-components/text-block/text-block";
import buttonQuestion from "@/digital-components/button-question/button-question";
import timeSlotModalListButton from "./time-slot-modal-list-button/time-slot-modal-list-button";
// TODO: Move this somewhere more global
import { defineRule, useField } from "vee-validate";
import { errorMessages } from "@/constants/error-messages";
import { required } from "@/helpers/validation-rules";
// Constants
import {
AppointmentTypeStrings,
PREMIUM_TIME_SLOT_ID_FLAG,
PREMIUM_FEE_PART_TYPE,
} from "@/constants/schedule-constants";
// Validation for the modal button
defineRule("time-slot-required", required(errorMessages.OPTION_REQUIRED));
// Constants
export default {
name: "timeSlotModalQuestion",
props: {
modelValue: Object,
cmsWidgetName: String,
mobileCmsWidgetName: String,
mobilePremiumCmsWidgetName: String,
dropoffCmsWidgetName: String,
sameDayDropOffCmsWidgetName: String,
appointmentType: String,
dateAndTimeSlotData: Object,
premiumAppointmentFee: Object,
estimatedServiceMinutesMinimum: Number,
estimatedServiceMinutesMaximum: Number,
validationRules: String,
},
data() {
return {
selectedTimeSlotId: this.modelValue.id,
timeSlotModalListButton: timeSlotModalListButton,
};
},
setup(props) {
const { handleChange } = useField("time-slot-modal-question", props.validationRules);
// Run validation on component load
handleChange(props.modelValue.id);
return {
handleChange,
};
},
watch: {
modelValue() {
// Run component validation that is used at parent level
if (this.modelValue.isPremiumAppointment) {
this.selectedTimeSlotId = this.addPremiumFlagToInput(this.modelValue.id);
} else {
this.selectedTimeSlotId = this.modelValue.id;
}
this.handleChange(this.modelValue.id);
},
availableTimeSlots(newValue) {
this.autoSelectTimeSlotIfOnlyOneIsAvailable(newValue);
},
},
computed: {
supplementalInformationBlock() {
let appointmentTypeCmsWidgetName;
if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
return null;
} else if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
appointmentTypeCmsWidgetName = this.selectedTimeSlotId?.includes(
PREMIUM_TIME_SLOT_ID_FLAG
)
? this.mobilePremiumCmsWidgetName
: this.mobileCmsWidgetName;
} else {
appointmentTypeCmsWidgetName = this.isSameDay
? this.sameDayDropOffCmsWidgetName
: this.dropoffCmsWidgetName;
}
return this.getCmsContent(appointmentTypeCmsWidgetName, "BodyText");
},
footerCloseButtonText() {
return this.getCmsContent(this.cmsWidgetName, "FooterText");
},
premiumAppointmentButtonText() {
return this.getCmsContent(this.mobilePremiumCmsWidgetName, "HeaderText");
},
dropoffButtonText() {
return this.getCmsContent(this.dropoffCmsWidgetName, "HeaderText");
},
dropoffDisclaimerText() {
return this.getCmsContent(this.dropoffCmsWidgetName, "FooterText");
},
dropOffDurationText() {
return this.getCmsContent(this.dropoffCmsWidgetName, "SubheaderText");
},
inshopDurationText() {
const inshopDurationTextWithoutTime = this.getCmsContent(
this.cmsWidgetName,
"SubheaderText"
);
const inshopDurationTime = this.getDisplayTextForDurationLength(
this.estimatedServiceMinutesMinimum,
this.estimatedServiceMinutesMaximum
);
return `${inshopDurationTextWithoutTime} ${inshopDurationTime}`;
},
durationTextBlockCopy() {
if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
return null;
} else if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
return this.inshopDurationText;
} else {
return this.dropOffDurationText;
}
},
shouldShowDropoffDisclaimerText() {
return this.appointmentType === AppointmentTypeStrings.DROP_OFF && !this.isSameDay;
},
isSameDay() {
return false;
},
dateSelectedReadableDate() {
if (!this.dateAndTimeSlotData) {
return null;
}
// This conversion ensures we don't get get GMT induced date changes
const dateObject = new Date(`${this.dateAndTimeSlotData.date}T00:00:00`);
// Ex: Tuesday, April 22
return dateObject.toLocaleDateString("en-us", {
weekday: "long",
month: "long",
day: "numeric",
});
},
availableTimeSlots() {
if (!this.dateAndTimeSlotData) {
return null;
}
if (this.appointmentType === AppointmentTypeStrings.DROP_OFF) {
return this.getAvailableTimeSlotsForDropOff(this.dateAndTimeSlotData.timeSlots);
} else if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
return this.getAvailableTimeSlotsForMobile(this.dateAndTimeSlotData.timeSlots);
} else {
return this.getAvailableTimeSlotsForInshop(this.dateAndTimeSlotData.timeSlots);
}
},
},
methods: {
openModal() {
this.$refs["timeSlots"].openModal();
},
// fires any time the footer button is used, is fired before "onModalClosed"
closeModal() {
let isSelectedAppointmentPremium = false;
if (this.selectedTimeSlotId.includes(PREMIUM_TIME_SLOT_ID_FLAG)) {
this.selectedTimeSlotId = this.removePremiumFlagFromInput(this.selectedTimeSlotId);
isSelectedAppointmentPremium = true;
}
const selectedTimeSlotData = {
id: this.selectedTimeSlotId,
isPremiumAppointment: isSelectedAppointmentPremium,
};
this.$emit("update:modelValue", selectedTimeSlotData);
this.$refs["timeSlots"].closeModal();
},
// fires any time the modal is closed, AFTER "closeModal" fires if footer button is used
onModalClosed() {
this.$emit("time-slot-modal-closed");
},
// Expected input: "HH:MM"
getDisplayTextForMilitaryTime(militaryTimeInput) {
let hours = parseInt(militaryTimeInput.split(":")[0]);
const minutes = militaryTimeInput.split(":")[1];
const meridianNotation = hours > 11 ? "PM" : "AM";
if (hours > 12) {
hours -= 12;
}
return `${hours}:${minutes} ${meridianNotation}`;
},
getDisplayTextForDurationLength(durationMinimum, durationMaximum) {
let displayTextForDurationLength;
if (durationMaximum >= 120) {
displayTextForDurationLength = `${durationMinimum / 60} - ${
durationMaximum / 60
} hours`;
} else {
displayTextForDurationLength = `${durationMinimum} - ${durationMaximum} minutes`;
}
return displayTextForDurationLength;
},
getAvailableTimeSlotsForInshop(timeSlotsForSelectedDate) {
return timeSlotsForSelectedDate.map((timeSlot) => {
const readableTime = this.getDisplayTextForMilitaryTime(timeSlot.startTime);
return {
value: timeSlot.id,
buttonLabel: readableTime,
};
});
},
getAvailableTimeSlotsForDropOff(timeSlotsForSelectedDate) {
return [
{
value: timeSlotsForSelectedDate[0].id,
buttonLabel: this.dropoffButtonText,
},
];
},
getAvailableTimeSlotsForMobile(timeSlotsForSelectedDate) {
const availableTimeSlots = timeSlotsForSelectedDate.map((timeSlot) => {
const readableTime = `${this.getDisplayTextForMilitaryTime(
timeSlot.startTime
)} - ${this.getDisplayTextForMilitaryTime(timeSlot.endTime)}`;
return {
value: timeSlot.id,
buttonLabel: readableTime,
};
});
const isPremiumTimeSlot = timeSlotsForSelectedDate[0].offerPremium;
const hasPremiumPartAvailable =
this.premiumAppointmentFee?.partType === PREMIUM_FEE_PART_TYPE;
if (isPremiumTimeSlot && hasPremiumPartAvailable) {
availableTimeSlots.unshift(
this.getPremiumAppointmentTimeSlot(timeSlotsForSelectedDate[0])
);
}
return availableTimeSlots;
},
getPremiumAppointmentTimeSlot(timeSlotData) {
const formattedPrice =
"+$" + this.getTotalLineItemPrice(this.premiumAppointmentFee).toFixed(2);
return {
// Unique value is required for each <input> and the premium appoinment shares a timeSlot ID
value: this.addPremiumFlagToInput(timeSlotData.id),
buttonLabel: this.premiumAppointmentButtonText,
buttonLabelSubCopy: formattedPrice,
additionalButtonData: {
isPremiumAppointment: true,
},
};
},
autoSelectTimeSlotIfOnlyOneIsAvailable(newAvailableTimeSlotsValue) {
const numberOfOptions = newAvailableTimeSlotsValue?.length;
if (numberOfOptions === 1) {
this.selectedTimeSlotId = newAvailableTimeSlotsValue[0].value;
}
},
addPremiumFlagToInput(timeSlotId) {
return (timeSlotId += PREMIUM_TIME_SLOT_ID_FLAG);
},
removePremiumFlagFromInput(timeSlotId) {
return timeSlotId.substring(0, timeSlotId.length - PREMIUM_TIME_SLOT_ID_FLAG.length);
},
},
components: {
modal,
textBlock,
buttonQuestion,
},
};
</script>
<style lang="scss">
.time-slots-modal.modal.modal-component {
> .modal-dialog > .modal-content {
margin-top: 24px;
}
.modal-header {
padding-bottom: 0;
margin-bottom: 0 !important;
}
.text-block.duration-text-block {
margin-top: 4px !important;
}
.supplemental-information {
line-height: 1.5rem;
font-size: 0.875rem;
li strong {
font-weight: $font-weight-bold;
}
li:not(:last-child) {
margin-bottom: 8px;
}
}
}
</style>

3
src/layouts/service-location/appointment-type-question/appointment-type-question.vue
View file

@ -1,6 +1,6 @@
<template>
<transition name="fade" mode="out-in">
<div class="appointment-type-question" aria-live="polite">
<div class="appointment-type-question" aria-live="polite" v-if="isDisplayed">
<buttonQuestion
ref="buttonQuestion"
customButtonQuestionId="appointmentTypeQuestion"
@ -25,6 +25,7 @@ export default {
modelValue: String,
groupName: String,
isAvailable: Boolean,
isDisplayed: Boolean,
suppressError: Boolean,
validationRules: String,
cmsWidgetName: String,

27
src/layouts/service-location/helpers/object-cloning-helper/object-cloning-helper.js
View file

@ -1,27 +0,0 @@
// For nested objects, spread operator only creates new references to the top level fields,
// the remaining nested fields actually reference the original object which can introduce problems.
// The purpose of this method is to deep clone the data in an object recursively, this is useful
// for cloning modelValues to internal models when regular two-way binding is not an option.
// See: mobile-location-modal-questions.vue
// Creates a deep clone of an object. Clones primitives, arrays and objects, excluding class instances.
// https://www.30secondsofcode.org/js/s/deep-clone
export function deepClone(object) {
if (object === null) {
return null;
}
let clone = Object.assign({}, object);
Object.keys(clone).forEach(
(key) =>
(clone[key] = typeof object[key] === "object" ? deepClone(object[key]) : object[key])
);
if (Array.isArray(object)) {
clone.length = object.length;
return Array.from(clone);
}
return clone;
}

48
src/layouts/service-location/helpers/object-cloning-helper/object-cloning-helper.spec.js
View file

@ -1,48 +0,0 @@
import { deepClone } from "./object-cloning-helper";
describe("object-cloning-helper.js", () => {
it("Should return null if no object is passed in", async () => {
// Arrange
const expected = null;
// Act
const result = deepClone(null);
// Assert
expect(result).toEqual(expected);
});
it("Should return a deep copy of the object", async () => {
// Arrange
const object = {
addressQuestions: {
streetAddress: "555 Some St",
apartmentNumberOrBusinessName: "Apt 1",
city: "Funkytown",
state: "OH",
zipCode: "55555",
},
isVehicleProtected: true,
serviceZipCode: "55555",
};
const expected = {
addressQuestions: {
streetAddress: "555 Some St",
apartmentNumberOrBusinessName: "Apt 1",
city: "Funkytown",
state: "OH",
zipCode: "55555",
},
isVehicleProtected: true,
serviceZipCode: "55555",
};
// Act
const result = deepClone(object);
// Assert
expect(result).toStrictEqual(expected);
});
});

46
src/layouts/service-location/helpers/service-location-helper/service-location-helper.js
View file

@ -1,4 +1,5 @@
import { storeActions } from "@/constants/store-actions";
import store from "@/store";
import baseMixin from "@/mixins/base-mixin.js";
export async function getPricedMobileFeePart(serviceZipCode) {
@ -42,3 +43,48 @@ export async function getServiceabilityDetails(serviceZipCode, lineItems) {
return Promise.resolve(serviceabilityDetails);
}
export async function getAvailabilityRating(
startDate,
endDate,
shopAppointmentType,
providerNumber
) {
// For a given shop provider number and date range, get the appointment time slots available
const shopTimeSlots = await baseMixin.methods.dispatchStoreAction(
storeActions.GET_SHOP_TIME_SLOTS,
{
providerNumber: providerNumber,
startDate: startDate,
endDate: endDate,
shopAppointmentType: shopAppointmentType,
},
false
);
// Rate the availability for the shop
let numberOfAppointmentsPerDay = [];
for (let i = 0; i < shopTimeSlots.data.days.length; i++) {
numberOfAppointmentsPerDay.push(shopTimeSlots.data.days[i].timeSlots.length);
}
const dateRange = 7;
const minimumNumberOfAppointmentsPerDay = 1;
const numberOfDaysToEvaluate = 2;
let daysWithMinimalAppointmentsCount = 0;
for (let i = 0; i < dateRange; i++) {
if (numberOfAppointmentsPerDay[i] >= minimumNumberOfAppointmentsPerDay) {
daysWithMinimalAppointmentsCount++;
if (daysWithMinimalAppointmentsCount >= numberOfDaysToEvaluate) {
break;
}
}
}
const isGoodAvailability = daysWithMinimalAppointmentsCount >= numberOfDaysToEvaluate;
const shopStatus = isGoodAvailability ? "high" : "low";
return Promise.resolve(shopStatus);
}

319
src/layouts/service-location/helpers/service-location-helper/service-location-helper.spec.js
View file

@ -1,9 +1,186 @@
import { getPricedMobileFeePart } from "./service-location-helper";
import {
getPricedMobileFeePart,
getServiceabilityDetails,
getAvailabilityRating,
} from "./service-location-helper";
import { storeActions } from "@/constants/store-actions";
jest.mock("@/store", () => ({
getters: {
order: {
vehicle: {
year: null,
make: null,
model: null,
style: null,
carId: null,
category: null,
vin: null,
imageUrl: null,
imageVifNumber: null,
imageColor: null,
registration: {
licensePlate: null,
address: null,
city: null,
state: null,
zipCode: null,
firstName: null,
lastName: null,
},
},
serviceLocation: {
address: null,
city: null,
state: null,
zipCode: null,
zipCodeCtu: null,
appointmentType: null,
provider: {
providerNumber: null,
address: {
streetAddress: null,
city: null,
state: null,
zip: null,
},
},
},
customer: {
emailAddress: null,
},
damage: {
isRepair: null,
numberOfChips: null,
glassToReplace: null,
partQuestionAnswers: null,
moldingQuestionAnswers: null,
capabilityQuestionAnswers: null,
},
lineItems: {
glassParts: null,
supportingItems: null,
vaps: null,
serverData: null,
},
payment: {
isInsurance: null,
insuranceCoverage: {
isVerified: null,
coverageStatus: null,
},
parentAccountNumber: 0,
},
schedule: {
date: null,
startTime: null,
endTime: null,
routeCode: null,
},
referralNumber: null,
referralDate: null,
referralCorrelationId: null,
eon: null,
},
},
}));
const mockStoreActionGetMobileFeePart = storeActions.GET_MOBILE_FEE_PART;
const mockStoreActionPriceOrderItemsAndSaveServerData =
storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA;
const mockStoreActionGetServiceabilityDetails = storeActions.GET_SERVICEABILITY_DETAILS;
const mockStoreActionGetShopTimeSlots = storeActions.GET_SHOP_TIME_SLOTS;
const mockGetShopTimeSlotsGoodAvailability = {
estimatedServiceMinutesMinimum: 0,
estimatedServiceMinutesMaximimum: 0,
days: [
{
date: "string",
timeSlots: [
{
id: "string",
startTime: "",
endTime: "",
offerPremium: true,
},
],
},
{
date: "string",
timeSlots: [],
},
{
date: "string",
timeSlots: [],
},
{
date: "string",
timeSlots: [],
},
{
date: "string",
timeSlots: [],
},
{
date: "string",
timeSlots: [],
},
{
date: "string",
timeSlots: [
{
id: "string",
startTime: "",
endTime: "",
offerPremium: true,
},
],
},
],
};
const mockGetShopTimeSlotsLowAvailability = {
estimatedServiceMinutesMinimum: 0,
estimatedServiceMinutesMaximimum: 0,
days: [
{
date: "string",
timeSlots: [],
},
{
date: "string",
timeSlots: [],
},
{
date: "string",
timeSlots: [],
},
{
date: "string",
timeSlots: [],
},
{
date: "string",
timeSlots: [],
},
{
date: "string",
timeSlots: [],
},
{
date: "string",
timeSlots: [
{
id: "string",
startTime: "",
endTime: "",
offerPremium: true,
},
],
},
],
};
jest.mock("@/mixins/base-mixin.js", () => ({
methods: {
@ -17,7 +194,7 @@ jest.mock("@/mixins/base-mixin.js", () => ({
});
}),
dispatchStoreAction: jest.fn().mockImplementation((actionName) => {
dispatchStoreAction: jest.fn().mockImplementation((actionName, request) => {
if (actionName === mockStoreActionGetMobileFeePart) {
return Promise.resolve({
data: {
@ -40,56 +217,116 @@ jest.mock("@/mixins/base-mixin.js", () => ({
},
]);
}
if (actionName === mockStoreActionGetServiceabilityDetails) {
return Promise.resolve({
isGlassServiceableInshop: true,
isRecalibrationServiceableInshop: true,
isGlassServiceableMobile: true,
isRecalibrationServiceableMobile: true,
});
}
if (actionName === mockStoreActionGetShopTimeSlots) {
if (request.providerNumber == "0000001") {
return Promise.resolve(mockGetShopTimeSlotsGoodAvailability);
}
return Promise.resolve(mockGetShopTimeSlotsLowAvailability);
}
}),
},
}));
describe("service-location-helper.js", () => {
it("Should return null if no service zip code is passed in", async () => {
// Arrange
const serviceZipCode = null;
const damageType = "Replace";
const parentAccountNumber = 167132;
const billToAccountNumber = 1234;
const expected = null;
describe("getPricedMobileFeePart", () => {
it("Should return null if no service zip code is passed in", async () => {
// Arrange
const serviceZipCode = null;
const damageType = "Replace";
const parentAccountNumber = 167132;
const billToAccountNumber = 1234;
const expected = null;
// Act
const result = await getPricedMobileFeePart(
serviceZipCode,
damageType,
parentAccountNumber,
billToAccountNumber
);
// Act
const result = await getPricedMobileFeePart(
serviceZipCode,
damageType,
parentAccountNumber,
billToAccountNumber
);
// Assert
expect(result).toEqual(expected);
// Assert
expect(result).toEqual(expected);
});
it("Should return the priced mobile fee part", async () => {
// Arrange
const serviceZipCode = "43235";
const damageType = "Replace";
const parentAccountNumber = 167132;
const billToAccountNumber = 1234;
const expected = {
partNumber: "MOBILE FEE",
description: "MOBILE FEE",
partType: "FEE",
laborAmount: 49.99,
sellingPrice: 0,
kitPrice: 0,
};
// Act
const result = await getPricedMobileFeePart(
serviceZipCode,
damageType,
parentAccountNumber,
billToAccountNumber
);
// Assert
expect(result).toEqual(expected);
});
});
it("Should return the priced mobile fee part", async () => {
// Arrange
const serviceZipCode = "43235";
const damageType = "Replace";
const parentAccountNumber = 167132;
const billToAccountNumber = 1234;
describe("getServiceabilityDetails", () => {
it("Should return the serviceability details", async () => {
// Arrange
const serviceZipCode = "43235";
const expected = {
partNumber: "MOBILE FEE",
description: "MOBILE FEE",
partType: "FEE",
laborAmount: 49.99,
sellingPrice: 0,
kitPrice: 0,
};
const expected = {
isGlassServiceableInshop: true,
isRecalibrationServiceableInshop: true,
isGlassServiceableMobile: true,
isRecalibrationServiceableMobile: true,
};
// Act
const result = await getPricedMobileFeePart(
serviceZipCode,
damageType,
parentAccountNumber,
billToAccountNumber
);
// Act
const result = await getServiceabilityDetails(serviceZipCode);
// Assert
expect(result).toEqual(expected);
// Assert
expect(result).toEqual(expected);
});
});
describe("getAvailabilityRating", () => {
// it("Should return a 'Good' rating", async () => {
// // Arrange
// const providerNumber = "0000001";
// const expected = "Good";
// // Act
// const result = await getAvailabilityRating(providerNumber);
// // Assert
// expect(result).toEqual(expected);
// });
// it("Should return a 'Low' rating", async () => {
// // Arrange
// const providerNumber = "0000000";
// const expected = "Low";
// // Act
// const result = await getAvailabilityRating(providerNumber);
// // Assert
// expect(result).toEqual(expected);
// });
});
});

58
src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
View file

@ -66,7 +66,7 @@ import addressQuestions from "@/layouts/address-lookup/customer-questions/addres
import vehicleProtectedQuestion from "@/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question";
// Helpers
import { deepClone } from "@/layouts/service-location/helpers/object-cloning-helper/object-cloning-helper";
import { deepClone } from "@/helpers/object-helper";
import {
getPricedMobileFeePart,
getServiceabilityDetails,
@ -202,6 +202,7 @@ export default {
this.internalModel = deepClone(this.modelValue);
},
onModalClosed() {
this.displayInvalidZipAlert = false;
this.internalModel = deepClone(this.modelValue);
this.resetValidation();
},
@ -236,34 +237,43 @@ export default {
});
},
async setMobileLocation() {
// Validate the Zip Code
const zipCodeData = await this.getZipCodeData(
this.internalModel.addressQuestions.zipCode
);
if (
this.internalModel.addressQuestions.zipCode !==
this.modelValue.addressQuestions.zipCode
) {
// Validate the Zip Code
const zipCodeData = await this.getZipCodeData(
this.internalModel.addressQuestions.zipCode
);
if (!zipCodeData.isValid) {
this.displayInvalidZipAlert = true;
this.resetModalButtonStyle();
if (!zipCodeData.isValid) {
this.displayInvalidZipAlert = true;
this.resetModalButtonStyle();
} else {
// retrieve mobile fee part
const serviceZipCode = this.internalModel.addressQuestions.zipCode;
const mobileFeePart = await getPricedMobileFeePart(serviceZipCode);
// retrieve serviceability details
const serviceabilityDetails = await getServiceabilityDetails(serviceZipCode);
// update content related to service zip code
this.$emit("updated-mobile-fee-part", mobileFeePart);
this.$emit("updated-serviceability", serviceabilityDetails.data);
this.$emit("updated-contains-military-base", zipCodeData.containsMilitaryBase);
if (this.onZipUpdateCallback) {
await this.onZipUpdateCallback(serviceZipCode);
}
// Update the page level model
this.$emit("update:modelValue", this.internalModel);
this.closeModal();
}
} else {
// retrieve mobile fee part
const serviceZipCode = this.internalModel.addressQuestions.zipCode;
const mobileFeePart = await getPricedMobileFeePart(serviceZipCode);
// retrieve serviceability details
const serviceabilityDetails = await getServiceabilityDetails(serviceZipCode);
// update content related to service zip code
this.$emit("updated-mobile-fee-part", mobileFeePart);
this.$emit("updated-serviceability", serviceabilityDetails.data);
this.$emit("updated-contains-military-base", zipCodeData.containsMilitaryBase);
// Update the page level model
this.$emit("update:modelValue", this.internalModel);
if (this.onZipUpdateCallback) {
await this.onZipUpdateCallback(serviceZipCode);
}
this.closeModal();
}
},

30
src/layouts/service-location/service-location.spec.js
View file

@ -505,36 +505,6 @@ describe("service-location.vue", () => {
expect(wrapper.vm.serviceZipCodeQuestion).toStrictEqual(newServiceZipCodeInfo);
});
test("resets appointment type selection when service zip code is updated by mobile location modal when Mobile is not selected", async () => {
// Arrange
const { wrapper } = setupMocks({});
await wrapper.setData({
selectedAppointmentType: "Dropoff",
});
const mobileLocationQuestionsComponent = wrapper.findComponent({
ref: "mobileLocationQuestions",
});
mobileLocationQuestionsComponent.resetComponent = jest.fn();
const serviceZipCodeComponent = wrapper.findComponent({
ref: "serviceZipCodeQuestion",
});
serviceZipCodeComponent.resetMobileFeePart = jest.fn();
const newServiceZipCodeQuestion = {
zipCode: "61606",
state: "IL",
};
// Act
serviceZipCodeComponent.vm.$emit("update:modelValue", newServiceZipCodeQuestion);
// Assert
expect(wrapper.vm.selectedAppointmentType).toStrictEqual(null);
});
test("does not reset appointment type selection when service zip code is updated by mobile location modal when Mobile is selected", async () => {
// Arrange
const { wrapper } = setupMocks({});

57
src/layouts/service-location/service-location.vue
View file

@ -47,9 +47,10 @@
alertClass="alert-warning" />
<appointmentTypeQuestion
v-model="selectedAppointmentType"
v-show="!displayNoShopsAlert"
v-show="isAppointmentTypeDisplayed"
:isServiceableMobile="isServiceableMobile"
:isServiceableInshop="isServiceableInshop"
:isDisplayed="isAppointmentTypeDisplayed"
ref="appointmentTypeQuestion"
groupName="appointmentTypeQuestion"
cmsWidgetName="AppointmentTypeQuestionWidget"
@ -71,9 +72,7 @@
<shopQuestion
ref="shopQuestion"
v-show="isShopQuestionDisplayed"
v-model="selectedProviderNumber"
@providerSelected="onProviderSelected"
:serviceZipCode="zipCode"
v-model="selectedProvider"
:selectedAppointmentType="selectedAppointmentType"
:isDisplayed="isShopQuestionDisplayed"
cmsWidgetName="ShopQuestionWidget" />
@ -134,31 +133,22 @@ defineRule("mobile-location-required", (value) => {
return true;
});
const defaultProvider = {
providerNumber: null,
address: null,
city: null,
state: null,
zip: null,
};
export default {
name: "service-location",
data() {
return {
streetAddress: this.getServiceAddressFromStore(),
apartmentNumberOrBusinessName: "",
apartmentNumberOrBusinessName: this.getServiceAddress2FromStore(),
city: this.getServiceCityFromStore(),
state: this.getServiceStateFromStore(),
zipCode: this.getServiceZipCodeFromStore(),
isVehicleProtected: null,
isVehicleProtected: this.getIsVehicleProtectedFromStore(),
isGlassServiceableInshop: null,
isRecalibrationServiceableInshop: null,
isGlassServiceableMobile: null,
isRecalibrationServiceableMobile: null,
selectedAppointmentType: this.getSelectedAppointmentType(),
selectedProvider: this.getSelectedProvider(),
selectedProviderNumber: this.getSelectedProvider().providerNumber,
mobileFeePart: null,
zipContainsMilitaryBase: false,
zipCodeCtu: null,
@ -226,7 +216,7 @@ export default {
if (newValue.zipCode !== this.zipCode) {
this.resetMobileLocation();
this.selectedAppointmentType = null;
this.selectedProvider = defaultProvider;
this.selectedProvider = null;
}
this.state = newValue.state;
@ -261,7 +251,7 @@ export default {
if (!this.selectedAppointmentType == "Mobile") {
this.selectedAppointmentType = null;
}
this.selectedProvider = defaultProvider;
this.selectedProvider = null;
}
},
},
@ -285,8 +275,11 @@ export default {
this.selectedAppointmentType === "Dropoff"
);
},
// Specifically check for isRecalibrationServiceableMobile === false, not null or true.
isAppointmentTypeDisplayed() {
return this.zipCode && !this.displayNoShopsAlert;
},
requiresInshopRecalibration() {
// Specifically check for isRecalibrationServiceableMobile === false, not null or true.
return (
this.isServiceableInshop &&
this.isGlassServiceableMobile &&
@ -340,9 +333,15 @@ export default {
this.zipContainsMilitaryBase = val;
}
},
setMobileFeePart(mobileFeePart) {
this.mobileFeePart = mobileFeePart;
},
getServiceAddressFromStore() {
return store.getters.order.serviceLocation.address;
},
getServiceAddress2FromStore() {
return store.getters.order.serviceLocation.address2;
},
getServiceCityFromStore() {
return store.getters.order.serviceLocation.city;
},
@ -352,14 +351,14 @@ export default {
getServiceZipCodeFromStore() {
return store.getters.order.serviceLocation.zipCode;
},
getIsVehicleProtectedFromStore() {
return store.getters.order.serviceLocation.isVehicleProtected;
},
getSelectedAppointmentType() {
return store.getters.order.serviceLocation.appointmentType;
},
getSelectedProvider() {
return store.getters.order.serviceLocation.provider ?? defaultProvider;
},
setMobileFeePart(mobileFeePart) {
this.mobileFeePart = mobileFeePart;
return store.getters.order.serviceLocation.provider;
},
resetMobileLocation() {
this.streetAddress = "";
@ -393,10 +392,13 @@ export default {
isVehicleProtected: this.isVehicleProtected,
provider: {
providerNumber: this.selectedProvider?.providerNumber,
address: this.selectedProvider?.address?.streetAddress,
city: this.selectedProvider?.address?.city,
state: this.selectedProvider?.address?.state,
zip: this.selectedProvider?.address?.zipCode,
address: {
streetAddress: this.selectedProvider?.address?.streetAddress,
city: this.selectedProvider?.address?.city,
state: this.selectedProvider?.address?.state,
zip: this.selectedProvider?.address?.zipCode,
zipCtu: this.selectedProvider?.address?.zipCodeCtu,
},
},
},
false
@ -413,9 +415,6 @@ export default {
async reloadShopData() {
await this.$refs.shopQuestion.reloadShopData(this.zipCode);
},
onProviderSelected(selectedProvider) {
this.selectedProvider = selectedProvider;
},
},
components: {
alert,

20
src/layouts/service-location/shop-question/shop-list-button/shop-list-button.spec.js
View file

@ -2,7 +2,7 @@ import { mount } from "@vue/test-utils";
import shopListButton from "./shop-list-button";
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
describe("service-package-radio.vue", () => {
describe("shop-list-button.vue", () => {
it("Should include buttonLabel in html", async () => {
// Arrange
let { wrapper } = setupMocks({
@ -49,6 +49,18 @@ describe("service-package-radio.vue", () => {
});
});
const startDate = new Date();
const endDate = new Date();
endDate.setDate(startDate.getDate() + 7);
const getAvailabilityRating = jest.fn().mockImplementation((actionName, request) => {
return Promise.resolve({
data: {},
});
});
const formattedStartDate = startDate.toISOString().split("T")[0];
const formattedEndDate = endDate.toISOString().split("T")[0];
const mockProps = {
buttonLabel: "buttonLabel test copy",
buttonLabelSubCopy: "buttonLabelSubCopy test copy",
@ -58,6 +70,12 @@ const mockProps = {
value: 0,
modelValue: 0,
groupName: "mockGroup",
additionalButtonData: {
availabilityRatingCallback: getAvailabilityRating,
startDate: formattedStartDate,
endDate: formattedEndDate,
shopAppointmentType: "Dropoff",
},
};
function setupMocks({ mountOptionsMockData = {} }) {

175
src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue
View file

@ -11,26 +11,32 @@
<span class="m-0 button-label-copy" :class="textPosition">{{
buttonLabel
}}</span>
<span class="m-0 button-label-sub-copy" :class="textPosition">{{
<span class="m-0 caption ms-1" :class="textPosition">{{
buttonLabelSubCopy
}}</span>
<div
class="availability-indicator"
:class="availability === 'high' ? 'green' : 'red'">
<span class="m-0 button-auxillary-copy">{{ buttonAuxillaryCopy }}</span>
v-if="displayAvailabilityIndicators"
class="availability-indicator rounded-pill"
:class="availabilityRatingClass">
<div
v-if="!isLoaderDisplayed"
class="availability-badge"
:class="availabilityRating == 'high' ? 'green' : 'red'"></div>
<span v-if="!isLoaderDisplayed" class="m-0 button-auxillary-copy">{{
badgeText
}}</span>
<loader v-if="isLoaderDisplayed" :class="['left', 'no-block']" />
</div>
</div>
<span
v-if="buttonBodyCopy"
class="m-0 button-label-sub-copy small"
:class="textPosition"
v-html="buttonBodyCopy"></span>
<div class="row-two">
<span
v-if="buttonBodyCopy"
class="m-0 button-label-sub-copy small"
v-html="buttonBodyCopy"></span>
</div>
<span v-if="screenReaderOnlyText" class="sr-only">
{{ screenReaderOnlyText }}
</span>
<loader
v-if="isLoaderDisplayed && selectingInitiatesLoad"
:class="[this.loaderColor, this.loaderPosition]" />
</div>
</baseInputButton>
</transition>
@ -40,32 +46,60 @@
import loader from "@/ux-components/loader/loader";
import baseInputButton from "@/digital-components/base-input-button/base-input-button";
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
import experimentMixin from "@/mixins/experiment-mixin";
import { experimentSettings } from "@/constants/experiments";
export default {
name: "shopListButton",
mixins: [inputButtonWrapperMixin],
props: {
loaderColor: String,
loaderPosition: {
type: String,
default: "right",
},
beforeMount() {
if (this.displayAvailabilityIndicators) {
this.displayLoader();
const startDate = this.additionalButtonData.startDate;
const endDate = this.additionalButtonData.endDate;
const shopAppointmentType = this.additionalButtonData.shopAppointmentType;
this.additionalButtonData
.availabilityRatingCallback(startDate, endDate, shopAppointmentType, this.value)
.then((data) => {
this.availabilityRating = data;
});
}
},
data() {
return {
isLoaderDisplayed: false,
availability: "low",
availabilityRating: null,
};
},
computed: {
displayAvailabilityIndicators() {
return experimentMixin.methods.hasSettingEqualTo(
experimentSettings.DISPLAY_AVAILABILITY_INDICATORS,
"true"
);
},
isLoaderDisplayed() {
return this.availabilityRating == null;
},
availabilityRatingClass() {
if (this.availabilityRating == null) {
return "gray";
} else {
return this.availabilityRating == "high" ? "green" : "red";
}
},
badgeText() {
if (this.availabilityRating != null) {
return this.availabilityRating == "high" ? "Appts available" : "Appts low";
}
return "";
},
},
methods: {
displayLoader() {
this.isLoaderDisplayed = true;
},
preHandleAnswerChange() {
if (this.selectingInitiatesLoad) {
this.displayLoader();
}
},
},
components: {
loader,
@ -75,9 +109,6 @@ export default {
</script>
<style lang="scss" scoped>
.loader {
position: absolute;
}
.list-button {
outline: none;
input[type="radio"],
@ -103,10 +134,6 @@ export default {
&:checked + .list-button-content span {
font-weight: 500;
}
&:checked + .list-button-content span:nth-child(2) {
font-weight: 400;
color: $gray-600;
}
}
}
.list-button-content {
@ -127,53 +154,83 @@ export default {
}
}
.button-content {
row-gap: 0.25rem;
.row-one {
display: flex;
align-items: center;
margin-bottom: 0.25rem !important;
line-height: 1.5rem;
.button-label-copy {
flex-grow: 0;
line-height: 1.5rem;
font-weight: 500;
}
.button-label-sub-copy {
flex-grow: 1;
line-height: 1.25rem !important;
font-weight: 400;
font-size: 0.75rem;
color: #727676;
padding-left: 0.25rem;
}
.availability-indicator {
display: none;
flex-direction: row;
justify-content: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
padding: 0.125rem 1.5rem;
gap: 0.25rem;
background: #e3f2ea;
border-radius: 4.5rem;
margin-left: auto;
padding: 0.125rem 0.5rem;
.availability-badge {
display: inline;
width: 13px;
height: 12px;
background-position: center;
background-repeat: no-repeat;
margin: 0 0.25rem 0 0;
&.green {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 12C3.19159 12 0.5 9.30841 0.5 6C0.5 2.69159 3.19159 0 6.5 0C9.80841 0 12.5 2.69159 12.5 6C12.5 9.30841 9.80841 12 6.5 12ZM6.5 0.785047C3.62449 0.785047 1.28505 3.12449 1.28505 6C1.28505 8.87551 3.62449 11.215 6.5 11.215C9.37551 11.215 11.715 8.87551 11.715 6C11.715 3.12449 9.37551 0.785047 6.5 0.785047Z' fill='%23006A36'/%3E%3Cpath d='M5.697 7.95252C5.5927 7.95252 5.49289 7.91102 5.41999 7.837L3.90597 6.32299C3.75233 6.16934 3.75233 5.92149 3.90597 5.76785C4.05962 5.6142 4.30747 5.6142 4.46111 5.76785L5.69812 7.00373L8.53999 4.16186C8.69364 4.00822 8.94149 4.00822 9.09513 4.16186C9.24878 4.31551 9.24878 4.56336 9.09513 4.717L5.97626 7.83588C5.90224 7.9099 5.80242 7.9514 5.69925 7.9514L5.697 7.95252Z' fill='%23006A36'/%3E%3C/svg%3E%0A");
}
&.red {
background-image: url("data:image/svg+xml,%3Csvg width='13' height='12' viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 12C3.19159 12 0.5 9.30841 0.5 6C0.5 2.69159 3.19159 0 6.5 0C9.80841 0 12.5 2.69159 12.5 6C12.5 9.30841 9.80841 12 6.5 12ZM6.5 0.785047C3.62449 0.785047 1.28505 3.12449 1.28505 6C1.28505 8.87551 3.62449 11.215 6.5 11.215C9.37551 11.215 11.715 8.87551 11.715 6C11.715 3.12449 9.37551 0.785047 6.5 0.785047Z' fill='%23006A36'/%3E%3Csvg width='13' height='12' viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 0C9.81368 0 12.5 2.68632 12.5 6C12.5 9.31368 9.81368 12 6.5 12C3.18632 12 0.5 9.31368 0.5 6C0.5 2.68632 3.18632 0 6.5 0ZM6.5 0.84C3.6548 0.84 1.34 3.1548 1.34 6C1.34 8.8452 3.6548 11.16 6.5 11.16C9.3452 11.16 11.66 8.8452 11.66 6C11.66 3.1548 9.3452 0.84 6.5 0.84ZM7.90018 4.00596C8.06422 3.84204 8.33002 3.84192 8.49406 4.00596C8.6581 4.17 8.6581 4.43592 8.49406 4.59996L7.0939 6L8.49406 7.40004C8.6581 7.56408 8.6581 7.83 8.49406 7.99404C8.4121 8.076 8.30458 8.11704 8.19706 8.11704C8.08966 8.11704 7.98214 8.076 7.90018 7.99404L6.50002 6.594L5.09986 7.99404C5.01778 8.076 4.91038 8.11704 4.80286 8.11704C4.69546 8.11704 4.58794 8.076 4.50598 7.99404C4.34182 7.83 4.34182 7.56408 4.50598 7.40004L5.90614 6L4.50598 4.59996C4.34182 4.43592 4.34182 4.17 4.50598 4.00596C4.66978 3.84192 4.93582 3.84204 5.09986 4.00596L6.50002 5.406L7.90018 4.00596Z' fill='%23AC160B'/%3E%3C/svg%3E%3C/svg%3E%0A");
}
}
.button-auxillary-copy {
box-sizing: border-box;
justify-content: right;
line-height: 1.25rem !important;
font-weight: 400;
line-height: 1.25rem;
font-weight: 500;
font-size: 0.75rem;
align-items: center;
}
.green {
color: #006a36;
background: #e3f2ea;
.loader {
padding: 0 0.25rem 0 0.25rem;
padding-top: 0.125rem;
padding-bottom: 0.125rem;
}
.red {
color: #ac160b;
background: #e3f2ea;
.loader:after {
background-color: $gray-550;
height: 1rem;
width: 1rem;
}
&.green {
color: $green-700;
background-color: $green-100;
}
&.red {
color: $red-600;
background-color: $red-100;
}
&.gray {
color: $gray-600;
background-color: $gray-100;
padding-left: 0.125rem;
padding-right: 0.125rem;
}
}
}
.row-two {
text-align: left;
}
}
</style>

124
src/layouts/service-location/shop-question/shop-question.spec.js
View file

@ -179,19 +179,19 @@ describe("shop-question.vue", () => {
expect(wrapper.vm.answers).toEqual([
{
buttonBodyCopy: "4403 Executive Pkwy, Westerville, OH 43081",
buttonLabel: "4403 Executive Pkwy",
buttonLabel: "Westerville",
buttonLabelSubCopy: "5 mi",
value: "003335",
},
{
buttonBodyCopy: "760 Dearborn Park Ln, Worthington, OH 43085",
buttonLabel: "760 Dearborn Park Ln",
buttonLabel: "Worthington",
buttonLabelSubCopy: "10.5 mi",
value: "001820",
},
{
buttonBodyCopy: "5015 N High St, Columbus, OH 43214",
buttonLabel: "5015 N High St",
buttonLabel: "Columbus",
buttonLabelSubCopy: "11.5 mi",
value: "003343",
},
@ -320,19 +320,19 @@ describe("shop-question.vue", () => {
const displayedAnswers = [
{
buttonBodyCopy: "4403 Executive Pkwy, Westerville, OH 43081",
buttonLabel: "4403 Executive Pkwy",
buttonLabel: "Westerville",
buttonLabelSubCopy: "5 mi",
value: "003335",
},
{
buttonBodyCopy: "760 Dearborn Park Ln, Worthington, OH 43085",
buttonLabel: "760 Dearborn Park Ln",
buttonLabel: "Worthington",
buttonLabelSubCopy: "10.5 mi",
value: "001820",
},
{
buttonBodyCopy: "5015 N High St, Columbus, OH 43214",
buttonLabel: "5015 N High St",
buttonLabel: "Columbus",
buttonLabelSubCopy: "11.5 mi",
value: "003343",
},
@ -388,37 +388,37 @@ describe("shop-question.vue", () => {
expect(wrapper.vm.answers).toEqual([
{
buttonBodyCopy: "4403 Executive Pkwy, Westerville, OH 43081",
buttonLabel: "4403 Executive Pkwy",
buttonLabel: "Westerville",
buttonLabelSubCopy: "5 mi",
value: "003335",
},
{
buttonBodyCopy: "760 Dearborn Park Ln, Worthington, OH 43085",
buttonLabel: "760 Dearborn Park Ln",
buttonLabel: "Worthington",
buttonLabelSubCopy: "10.5 mi",
value: "001820",
},
{
buttonBodyCopy: "5015 N High St, Columbus, OH 43214",
buttonLabel: "5015 N High St",
buttonLabel: "Columbus",
buttonLabelSubCopy: "11.5 mi",
value: "003343",
},
{
buttonBodyCopy: "1670 Harmon Ave, Columbus, OH 43223",
buttonLabel: "1670 Harmon Ave",
buttonLabel: "Columbus",
buttonLabelSubCopy: "16 mi",
value: "006747",
},
{
buttonBodyCopy: "3938 Powell Rd, Powell, OH 43065",
buttonLabel: "3938 Powell Rd",
buttonLabel: "Powell",
buttonLabelSubCopy: "16.5 mi",
value: "003341",
},
{
buttonBodyCopy: "4580 W Broad St, Columbus, OH 43228",
buttonLabel: "4580 W Broad St",
buttonLabel: "Columbus",
buttonLabelSubCopy: "19.5 mi",
value: "003342",
},
@ -434,7 +434,7 @@ describe("shop-question.vue", () => {
const { wrapper } = setupMocks({
mixins: [mockMixin],
props: {
modelValue: selectedProvider.providerNumber,
modelValue: selectedProvider,
serviceZipCode: "43081",
selectedAppointmentType: "Dropoff",
cmsWidgetName: cmsWidgetName,
@ -460,18 +460,7 @@ describe("shop-question.vue", () => {
const { wrapper } = setupMocks({
mixins: [mockMixin],
props: {
modelValue: {
address: {
city: "POWELL",
country: "US",
state: "OH",
streetAddress: "3938 POWELL RD",
zipCode: "43065",
},
distanceInMiles: 16.2690495685233,
providerNumber: "003341",
},
serviceZipCode: "43081",
modelValue: null,
selectedAppointmentType: "Dropoff",
cmsWidgetName: cmsWidgetName,
},
@ -481,99 +470,22 @@ describe("shop-question.vue", () => {
});
// Act
wrapper.vm.initializeComponent(shopQuestionInitialData);
await wrapper.vm.initializeComponent(shopQuestionInitialData);
await wrapper.vm.$nextTick();
expect(wrapper.vm.answers.length).toEqual(3);
await wrapper.setProps({
selectedAppointmentType: "Inshop",
});
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
// Assert
expect(wrapper.vm.answers.length).toEqual(3);
});
// it("Should reload the shops when the service zip code changes", async () => {
// // Arrange
// const { wrapper } = setupMocks({
// mixins: [mockMixin],
// props: {
// modelValue: {
// address: {
// city: "POWELL",
// country: "US",
// state: "OH",
// streetAddress: "3938 POWELL RD",
// zipCode: "43065",
// },
// distanceInMiles: 16.2690495685233,
// providerNumber: "003341",
// },
// serviceZipCode: "43081",
// selectedAppointmentType: "Dropoff",
// cmsWidgetName: cmsWidgetName,
// isDisplayed: true
// },
// mountOptions: {
// attachTo: document.body,
// },
// });
// wrapper.vm.$options.methods.loadInitialData = jest.fn().mockImplementation(() => {
// return new Promise((resolve) => {
// resolve(mockNewShopList);
// });
// });
// // Act
// wrapper.vm.initializeComponent(shopQuestionInitialData);
// await wrapper.vm.$options.watch.serviceZipCode.handler.call(wrapper.vm, "43054");
// // Assert
// expect(wrapper.vm.shopProviders.length).toEqual(3);
// expect(wrapper.vm.shopProviders).toEqual(mockNewShopList.shopProviders);
// });
// it("Should clear the existing answers when the service zip code changes", async () => {
// // Arrange
// const { wrapper } = setupMocks({
// mixins: [mockMixin],
// props: {
// modelValue: {
// address: {
// city: "POWELL",
// country: "US",
// state: "OH",
// streetAddress: "3938 POWELL RD",
// zipCode: "43065",
// },
// distanceInMiles: 16.2690495685233,
// providerNumber: "003341",
// },
// serviceZipCode: "43081",
// selectedAppointmentType: "Dropoff",
// cmsWidgetName: cmsWidgetName,
// },
// mountOptions: {
// attachTo: document.body,
// },
// });
// //Act
// wrapper.vm.initializeComponent(shopQuestionInitialData);
// wrapper.setProps({
// selectedAppointmentType: "Inshop",
// });
// await wrapper.vm.$nextTick();
// // Assert
// expect(wrapper.vm.answers.length).toEqual(3);
// });
});
function setupMocks({ mountOptions, mixins, props, isShallowMount = true }) {

106
src/layouts/service-location/shop-question/shop-question.vue
View file

@ -17,9 +17,10 @@
:answers="answers"
groupName="chooseShop"
textPosition="text-start"
v-model="selectedValue"
v-model="selectedProviderNumber"
isRequired
validationRules="option-required" />
validationRules="option-required"
:additionalButtonData="additionalButtonData" />
<textLink
v-show="displaySeeMoreLocationsLink"
ref="showMoreShopsLink"
@ -51,6 +52,8 @@ import { errorMessages } from "@/constants/error-messages";
import baseMixin from "@/mixins/base-mixin.js";
import { nextTick } from "vue";
import { getAvailabilityRating } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
export default {
@ -68,8 +71,8 @@ export default {
props: {
modelValue: {
type: Object,
default: () => null,
},
serviceZipCode: String,
selectedAppointmentType: String,
cmsWidgetName: String,
validationRules: String,
@ -84,13 +87,16 @@ export default {
return this.modelValue;
},
set: function (newValue) {
// Button Question only supports primitive values so we must get the full object to emit to the page
const provider = this.shopProviders?.find(
(provider) => provider.providerNumber == newValue
);
this.$emit("update:modelValue", newValue);
this.$emit("providerSelected", provider);
},
},
selectedProviderNumber: {
get: function () {
return this.selectedValue?.providerNumber;
},
set: function (newValue) {
// Button Question only supports Number, or String data types so we must get the full object to emit
this.selectedValue = this.getSelectedProviderObject(newValue);
},
},
displayDropoffInformation() {
@ -99,6 +105,21 @@ export default {
showMoreShopsLinkText() {
return this.getCmsContent("ShowMoreShopsLinkWidget", "Text");
},
additionalButtonData() {
const startDate = new Date();
const endDate = new Date();
endDate.setDate(startDate.getDate() + 7);
const formattedStartDate = startDate.toISOString().split("T")[0];
const formattedEndDate = endDate.toISOString().split("T")[0];
return {
availabilityRatingCallback: getAvailabilityRating,
startDate: formattedStartDate,
endDate: formattedEndDate,
shopAppointmentType: this.selectedAppointmentType,
};
},
},
methods: {
loadInitialData(serviceZipCode) {
@ -140,7 +161,7 @@ export default {
const distanceInMiles = Math.round(shopProvider.distanceInMiles * 2) / 2;
return {
buttonLabel: streetAddress,
buttonLabel: city,
buttonLabelSubCopy: `${distanceInMiles} mi`,
buttonBodyCopy: `${streetAddress}, ${city}, ${state} ${zipCode}`,
value: shopProvider.providerNumber,
@ -155,7 +176,7 @@ export default {
});
}
await this.$nextTick();
await nextTick();
if (this.shopIndex == this.shopProviders.length) {
this.displaySeeMoreLocationsLink = false;
@ -163,18 +184,13 @@ export default {
this.displaySeeMoreLocationsLink = true;
}
await this.$nextTick();
await nextTick();
this.scrollToPageBottom();
},
resetAnswers() {
this.answers = [];
this.shopIndex = 0;
this.selectedValue = "";
if (this.$refs.buttonQuestion) {
this.$refs.buttonQuestion.resetField();
}
},
async reloadShopData(serviceZipCode) {
const result = await this.loadData(serviceZipCode);
@ -185,34 +201,52 @@ export default {
await nextTick();
await this.getNextShopsFromList();
},
getSelectedProviderObject(providerNumber) {
const provider = this.shopProviders?.find(
(provider) => provider.providerNumber == providerNumber
);
return provider;
},
getSelectedProviderIndex(providers, selectedProviderNumber) {
const index = providers.findIndex(
(provider) => provider.providerNumber == selectedProviderNumber
);
return index;
},
},
watch: {
selectedAppointmentType: {
async handler(newValue) {
this.resetAnswers();
await this.$nextTick();
await nextTick();
this.selectedProviderNumber = null;
await nextTick();
if (newValue !== "Mobile") {
await this.getNextShopsFromList();
this.getNextShopsFromList();
}
},
},
shopProviders: {
async handler(newValue) {
//this.resetAnswers();
await this.$nextTick();
await nextTick();
if (this.selectedAppointmentType) {
const selectedShopIndex = newValue.findIndex(
(provider) => provider.providerNumber == this.modelValue
const selectedShopIndex = this.getSelectedProviderIndex(
newValue,
this.selectedProviderNumber
);
if (selectedShopIndex >= 3) {
await this.getNextShopsFromList(selectedShopIndex + 1);
} else {
await this.getNextShopsFromList();
await nextTick();
}
}
},
@ -228,25 +262,31 @@ export default {
<style lang="scss">
.shop-question {
margin-top: 1rem !important;
text-align: center !important;
margin-top: 1rem;
text-align: center;
.button-question {
.question-text {
margin-top: 0.5rem !important;
margin-top: 0.5rem;
}
}
}
.drop-off-alert {
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_13957_112512)'%3E%3Cpath d='M5.99865 0C4.81147 4.82643e-07 3.65095 0.352111 2.66392 1.01179C1.67688 1.67146 0.907678 2.60907 0.45361 3.70599C-0.000459241 4.80291 -0.11899 6.00986 0.113013 7.17415C0.345015 8.33845 0.917126 9.40778 1.75697 10.2469C2.59682 11.086 3.66666 11.6571 4.83117 11.8881C5.99567 12.119 7.20251 11.9994 8.29902 11.5443C9.39553 11.0893 10.3324 10.3192 10.9912 9.33159C11.65 8.34396 12.0011 7.18313 12 5.99594C11.9971 4.40566 11.3638 2.88142 10.2388 1.75742C9.11375 0.633431 7.58894 0.00143011 5.99865 0V0ZM5.99865 11.2478C4.96135 11.2473 3.94748 10.9392 3.08518 10.3627C2.22288 9.7861 1.55085 8.96685 1.15401 8.00846C0.75718 7.05006 0.653353 5.99554 0.855656 4.97815C1.05796 3.96077 1.55731 3.02618 2.29061 2.29251C3.0239 1.55884 3.95823 1.059 4.97551 0.856176C5.99279 0.653349 7.04737 0.756633 8.00597 1.15297C8.96457 1.54931 9.78416 2.22092 10.3612 3.08293C10.9382 3.94493 11.2467 4.95864 11.2478 5.99594C11.2478 7.38835 10.6949 8.72377 9.71053 9.70861C8.7262 10.6934 7.39106 11.2471 5.99865 11.2478V11.2478Z' fill='%2306577C'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.22736 8.84695C6.30613 8.76818 6.35038 8.66135 6.35038 8.54996V5.30996C6.35038 5.19857 6.30613 5.09174 6.22736 5.01298C6.1486 4.93421 6.04177 4.88996 5.93038 4.88996C5.81899 4.88996 5.71216 4.93421 5.63339 5.01298C5.55463 5.09174 5.51038 5.19857 5.51038 5.30996V8.54996C5.51038 8.66135 5.55463 8.76818 5.63339 8.84695C5.71216 8.92571 5.81899 8.96996 5.93038 8.96996C6.04177 8.96996 6.1486 8.92571 6.22736 8.84695ZM5.69704 3.97918C5.76611 4.02533 5.84731 4.04996 5.93038 4.04996C5.98558 4.05012 6.04026 4.03936 6.09129 4.01831C6.14232 3.99726 6.18868 3.96633 6.22771 3.9273C6.26675 3.88827 6.29768 3.8419 6.31873 3.79088C6.33978 3.73985 6.35053 3.68516 6.35038 3.62996C6.35038 3.54689 6.32574 3.46569 6.27959 3.39662C6.23344 3.32755 6.16785 3.27372 6.0911 3.24193C6.01436 3.21014 5.92991 3.20183 5.84844 3.21803C5.76697 3.23424 5.69213 3.27424 5.63339 3.33298C5.57465 3.39171 5.53465 3.46655 5.51845 3.54802C5.50224 3.6295 5.51056 3.71394 5.54235 3.79069C5.57414 3.86743 5.62797 3.93303 5.69704 3.97918Z' fill='%2306577C'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_13957_112512'%3E%3Crect width='12' height='12' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-size: 0.75rem;
background-position: 0.5rem 0.75rem;
border-radius: 0.5rem;
display: flex;
flex-direction: row;
padding: 0.5rem 0.5rem 0.5rem 1.5rem;
gap: 0.25rem;
.alert-heading {
text-align: left;
font-size: 0.75rem !important;
line-height: 1.25rem !important;
font-size: 0.75rem;
line-height: 1.25rem;
}
margin-top: 0.5rem !important;
padding-left: 1.5rem !important;
padding-right: 0.5rem !important;
}
</style>

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

@ -1,4 +1,3 @@
fmg
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<div class="page-container-grouped-styles">

4
src/layouts/vehicle-parts/vehicle-parts.spec.js
View file

@ -481,7 +481,7 @@ describe("vehicle-parts.vue", () => {
},
});
wrapper.vm.$store.commit = jest.fn();
wrapper.vm.dispatchStoreAction = jest.fn();
wrapper.setData({
selectedGlassParts: { "Rear-Stationary": { partNumber: "DB12209GTYN" } },
@ -498,7 +498,7 @@ describe("vehicle-parts.vue", () => {
await wrapper.vm.forwardButtonAction();
//Assert
expect(wrapper.vm.$store.commit).toHaveBeenCalled();
expect(wrapper.vm.dispatchStoreAction).toHaveBeenCalled();
// TODO KO UNCOMMENT FOR QUOTE PAGES RELEASE
// expect(wrapper.vm.$router.navigateWithSaving).toHaveBeenCalledWith(

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

@ -323,7 +323,7 @@ export default {
await this.dispatchStoreAction(storeActions.SAVE_EMAIL, this.emailAddress, false);
await this.dispatchStoreAction(
storeActions.SAVE_SERVICE_LOCATION,
storeActions.SAVE_SERVICE_ZIP_CODE_INFO,
{
zipCode: this.serviceZipCode,
state: resultMap.zipCodeData.state,
@ -360,7 +360,7 @@ export default {
);
} else {
await this.dispatchStoreAction(
storeActions.SAVE_SERVICE_LOCATION,
storeActions.SAVE_SERVICE_ZIP_CODE_INFO,
{
zipCode: this.serviceZipCode,
state: zipCodeData.state,

2
src/mixins/input-button-wrapper-mixin.js
View file

@ -21,7 +21,7 @@ export default {
textPosition: String,
screenReaderOnlyText: String,
isWide: Boolean,
additionalButtonStyling: String,
additionalButtonData: Object,
},
computed: {
selectedValue: {

2
src/mixins/vehicle-questions-mixin.js
View file

@ -442,7 +442,7 @@ export default {
const collectedGlassParts = this.reducedGlassPartsArray(partsOrQuestions);
// save to store lineItems.glassParts
self.$store.commit(storeMutations.UPDATE_GLASS_PARTS, collectedGlassParts);
self.dispatchStoreAction(storeActions.SAVE_GLASS_PARTS, collectedGlassParts, false);
const payment = store.getters.payment;

6
src/mixins/vehicle-questions-mixin.spec.js
View file

@ -2240,15 +2240,17 @@ describe("vehicle-questions-mixin", () => {
// Assert
expect(wrapper.vm.$store.commit).toHaveBeenCalledTimes(1);
expect(wrapper.vm.$store.commit).toHaveBeenCalledWith(
storeMutations.UPDATE_GLASS_PARTS,
expect(wrapper.vm.$store.dispatch).toHaveBeenCalledWith(
storeActions.SAVE_GLASS_PARTS,
collectedGlassParts
);
expect(wrapper.vm.$router.navigateWithSaving).toHaveBeenCalledTimes(1);
expect(wrapper.vm.$router.navigateWithSaving).toHaveBeenCalledWith(
navigationScenarios.CLICKED_FORWARD_WITH_NO_MORE_QUESTIONS,
{ query: { fmgPage: "vin-lookup" } }
);
expect(wrapper.vm.$router.navigateWithoutSaving).not.toHaveBeenCalled();
});
});

20
src/router/index.js
View file

@ -28,27 +28,7 @@ import analyticsMixin from "@/mixins/analytics-mixin";
import { experimentTriggers } from "../constants/experiments";
import { applicationConfig } from "../constants/application-config";
// Components
import datePicker from "@/digital-components/date-picker/date-picker.vue";
import demoDatePicker from "@/layouts/demo-date-picker/demo-date-picker.vue";
import review from "@/layouts/review/review";
const routes = [
{
path: "/demo-date-picker", // This is a temporary route for testing.
name: "demo-date-picker",
component: demoDatePicker,
},
{
path: "/date-picker", // This is a temporary route for testing.
name: "date-picker",
component: datePicker,
},
{
path: "/review", // This is a temporary route for testing.
name: "review",
component: review,
},
{
path: "/",
name: "root",

458
src/store/index.js
View file

@ -1,4 +1,4 @@
import { createStore, Store } from "vuex";
import { createStore } from "vuex";
import { endpoints } from "@/constants/endpoints.js";
import { storeMutations } from "@/constants/store-mutations";
import { getDateForSavedSessionTimeout } from "@/helpers/heritage-integration/session-helper";
@ -9,8 +9,9 @@ import { applicationConfig } from "@/constants/application-config";
import { experimentTriggers } from "@/constants/experiments";
import { damageLocationsSelected } from "@/constants/damage-locations-selected";
import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
import router from "@/router";
import { deleteFunnelCookie } from "@/helpers/heritage-integration/cookie-helper.js";
import { deepEqual } from "@/helpers/object-helper";
import { AppointmentTypeStrings, PREMIUM_FEE_PART_TYPE } from "@/constants/schedule-constants";
// Export State
const getDefaultState = () => {
@ -39,17 +40,21 @@ const getDefaultState = () => {
},
serviceLocation: {
address: null,
address2: null,
city: null,
state: null,
zipCode: null,
zipCodeCtu: null,
appointmentType: null,
isVehicleProtected: null,
provider: {
providerNumber: null,
address: null,
city: null,
state: null,
zip: null,
address: {
streetAddress: null,
city: null,
state: null,
zip: null,
},
},
},
customer: {
@ -77,6 +82,13 @@ const getDefaultState = () => {
},
parentAccountNumber: 0,
},
schedule: {
date: null,
startTime: null,
endTime: null,
routeCode: null,
jobMaxMinutes: null,
},
referralNumber: null,
referralDate: null,
referralCorrelationId: null,
@ -242,12 +254,16 @@ export const mutations = {
state.order.serviceLocation.isVehicleProtected = serviceLocationInfo.isVehicleProtected;
if (serviceLocationInfo.provider) {
state.order.serviceLocation.provider.providerNumber =
serviceLocationInfo.provider?.providerNumber;
state.order.serviceLocation.provider.address = serviceLocationInfo.provider?.address;
state.order.serviceLocation.provider.city = serviceLocationInfo.provider?.city;
state.order.serviceLocation.provider.state = serviceLocationInfo.provider?.state;
state.order.serviceLocation.provider.zip = serviceLocationInfo.provider?.zip;
state.order.serviceLocation.provider = serviceLocationInfo.provider;
}
},
updateSchedule(state, scheduleInfo) {
if (scheduleInfo) {
state.order.schedule.date = scheduleInfo.date;
state.order.schedule.startTime = scheduleInfo.startTime;
state.order.schedule.endTime = scheduleInfo.endTime;
state.order.schedule.routeCode = scheduleInfo.routeCode;
state.order.schedule.jobMaxMinutes = scheduleInfo.jobMaxMinutes;
}
},
@ -318,12 +334,44 @@ export const mutations = {
state.applicationUser.pageData[fmgPageValues.MOLDING_QUESTIONS] = null;
state.applicationUser.pageData[fmgPageValues.CAPABILITY_QUESTIONS] = null;
},
resetSchedule(state) {
state.order.schedule.date = null;
state.order.schedule.startTime = null;
state.order.schedule.endTime = null;
state.order.schedule.routeCode = null;
state.order.schedule.jobMaxMinutes = null;
//early bird fee used on schedule page also needs reset when schedule is reset
const supportingItems = state.order.lineItems.supportingItems;
const removeEarlyBirdIndex = supportingItems?.findIndex(
(item) => item.partType == PREMIUM_FEE_PART_TYPE
);
if (removeEarlyBirdIndex >= 0) {
supportingItems.splice(removeEarlyBirdIndex, 1);
state.order.lineItems.supportingItems = supportingItems;
}
},
resetState(state) {
Object.assign(state, getDefaultState());
},
resetSaveSessionPromise(state) {
state.applicationUser.saveSessionPromise = null;
},
resetServiceLocationAppointmentType(state) {
state.order.serviceLocation.appointmentType = null;
},
resetServiceLocationProvider(state) {
state.order.serviceLocation.provider = null;
},
resetServiceLocationMobileAddress(state) {
state.order.serviceLocation.address = null;
state.order.serviceLocation.address2 = null;
state.order.serviceLocation.city = null;
state.order.serviceLocation.state = null;
state.order.serviceLocation.zipCode = null;
state.order.serviceLocation.isVehicleProtected = null;
},
// Misc Mutations
updateStateWithOrderInformation(state, sessionInformation) {
state.order.referralNumber = sessionInformation.order.referralNumber;
@ -375,18 +423,20 @@ export const mutations = {
state.order.lineItems.supportingItems = sessionInformation.order.lineItems.supportingItems;
state.order.lineItems.vaps = sessionInformation.order.lineItems.vaps;
state.order.lineItems.serverData = sessionInformation.order.lineItems.serverData;
state.order.payment.parentAccountNumber =
sessionInformation.order.payment.parentAccountNumber;
(state.order.serviceLocation.address =
sessionInformation.order.serviceLocation.streetAddress),
(state.order.serviceLocation.address2 =
sessionInformation.order.serviceLocation.address2),
(state.order.serviceLocation.city = sessionInformation.order.serviceLocation.city),
(state.order.serviceLocation.state = sessionInformation.order.serviceLocation.state),
(state.order.serviceLocation.zipCode =
sessionInformation.order.serviceLocation.zipCode),
(state.order.serviceLocation.zipCodeCtu =
sessionInformation.order.serviceLocation.zipCodeCtu);
state.order.serviceLocation.address =
sessionInformation.order.serviceLocation.streetAddress;
state.order.serviceLocation.address2 =
sessionInformation.order.serviceLocation.streetAddress2;
state.order.serviceLocation.city = sessionInformation.order.serviceLocation.city;
state.order.serviceLocation.state = sessionInformation.order.serviceLocation.state;
state.order.serviceLocation.zipCode = sessionInformation.order.serviceLocation.zipCode;
state.order.serviceLocation.zipCodeCtu =
sessionInformation.order.serviceLocation.zipCodeCtu;
state.order.serviceLocation.appointmentType =
sessionInformation.order.serviceLocation.appointmentType;
state.order.serviceLocation.isVehicleProtected =
@ -394,14 +444,14 @@ export const mutations = {
state.order.serviceLocation.provider.providerNumber =
sessionInformation.order.serviceLocation.provider?.providerNumber;
state.order.serviceLocation.provider.address =
sessionInformation.order.serviceLocation.provider?.address;
state.order.serviceLocation.provider.city =
sessionInformation.order.serviceLocation.provider?.city;
state.order.serviceLocation.provider.state =
sessionInformation.order.serviceLocation.provider?.state;
state.order.serviceLocation.provider.zip =
sessionInformation.order.serviceLocation.provider?.zip;
state.order.serviceLocation.provider.address.streetAddress =
sessionInformation.order.serviceLocation.provider?.address?.streetAddress;
state.order.serviceLocation.provider.address.city =
sessionInformation.order.serviceLocation.provider?.address?.city;
state.order.serviceLocation.provider.address.state =
sessionInformation.order.serviceLocation.provider?.address?.state;
state.order.serviceLocation.provider.address.zip =
sessionInformation.order.serviceLocation.provider?.address?.zip;
state.order.payment.isInsurance = sessionInformation.order.payment.isInsurance;
state.order.payment.insuranceCoverage.isVerified =
@ -415,6 +465,12 @@ export const mutations = {
state.applicationUser.crmCustomerId = sessionInformation.applicationUser.crmCustomerId;
state.applicationUser.pageData = sessionInformation.applicationUser.pageData;
state.applicationUser.lastPage = sessionInformation.applicationUser.lastPage;
state.order.schedule.date = sessionInformation.order.schedule?.date;
state.order.schedule.startTime = sessionInformation.order.schedule?.startTime;
state.order.schedule.endTime = sessionInformation.order.schedule?.endTime;
state.order.schedule.routeCode = sessionInformation.order.schedule?.routeCode;
state.order.schedule.jobMaxMinutes = sessionInformation.order.schedule?.jobMaxMinutes;
},
updateExperiments(state, experiments) {
state.applicationUser.experiments = experiments;
@ -526,6 +582,7 @@ export const actions = {
payload: {},
});
},
lookupVehicleByYmms(context, { year, make, model, style }) {
return globalMethods.callHttpClient({
method: endpoints.LookupVehicleByYmms.method,
@ -533,6 +590,7 @@ export const actions = {
payload: {},
});
},
lookupVehicleByVin(context, { vin }) {
return globalMethods.callHttpClient({
method: endpoints.LookupVehicleByVin.method,
@ -542,6 +600,7 @@ export const actions = {
},
});
},
lookupVinByPlate(context, { licensePlate, licenseState }) {
return globalMethods.callHttpClient({
method: endpoints.LookupVinByPlate.method,
@ -552,6 +611,7 @@ export const actions = {
},
});
},
lookupVinByAddress(
context,
{ licenseLastName, licenseStreetAddress, licenseZip, licenseState }
@ -567,6 +627,7 @@ export const actions = {
},
});
},
lookupVinByImage(context, image) {
const data = new FormData();
data.append("vinImage", image);
@ -577,6 +638,7 @@ export const actions = {
isFormData: true,
});
},
isVinByAddressPermissible(context, zip) {
return globalMethods.callHttpClient({
method: endpoints.IsVinByAddressPermissible.method,
@ -584,6 +646,7 @@ export const actions = {
payload: {},
});
},
getVehicleMakes(context, { year }) {
return globalMethods.callHttpClient({
method: endpoints.GetVehicleMakes.method,
@ -591,6 +654,7 @@ export const actions = {
payload: {},
});
},
getVehicleModels(context, { year, make }) {
return globalMethods.callHttpClient({
method: endpoints.GetVehicleModels.method,
@ -598,6 +662,7 @@ export const actions = {
payload: {},
});
},
getVehicleStyles(context, { year, make, model }) {
return globalMethods.callHttpClient({
method: endpoints.GetVehicleStyles.method,
@ -605,6 +670,7 @@ export const actions = {
payload: {},
});
},
setVehicle(context, { year, make, model, style }) {
return globalMethods
.callHttpClient({
@ -627,6 +693,7 @@ export const actions = {
return response;
});
},
getDamageOptions(context, { carId }) {
return globalMethods.callHttpClient({
methods: endpoints.GetDamageOptions.method,
@ -634,6 +701,7 @@ export const actions = {
payload: {},
});
},
validateZip(context, { zip }) {
return globalMethods.callHttpClient({
methods: endpoints.ValidateZip.method,
@ -648,18 +716,22 @@ export const actions = {
context.commit(storeMutations.UPDATE_SUPPORTING_ITEMS, null);
context.commit(storeMutations.UPDATE_VAPS, null);
},
resetRegistrationAndDependencies(context) {
context.commit(storeMutations.RESET_REGISTRATION_STATE);
context.commit(storeMutations.RESET_GLASS_PARTS_STATE);
context.commit(storeMutations.UPDATE_SUPPORTING_ITEMS, null);
},
resetPartsAndDependencies(context) {
context.commit(storeMutations.RESET_GLASS_PARTS_STATE);
context.commit(storeMutations.UPDATE_SUPPORTING_ITEMS, null);
},
resetState(context) {
context.commit(storeMutations.RESET_STATE);
},
resetSaveSessionPromise(context) {
context.commit(storeMutations.RESET_SAVE_SESSION_PROMISE);
},
@ -674,12 +746,14 @@ export const actions = {
},
});
},
getHomepageName(context) {
return globalMethods.callHttpClient({
method: endpoints.GetHomepageInfo.method,
endpoint: endpoints.GetHomepageInfo.url(applicationConfig.APPLICATION_ABBREVIATION),
});
},
getPageData(context, { pageName }) {
return globalMethods.callHttpClient({
method: endpoints.GetPageData.method,
@ -746,6 +820,7 @@ export const actions = {
context.commit(storeMutations.UPDATE_SAVED_SESSION_ID, savedSessionId);
context.commit(storeMutations.UPDATE_CRM_CUSTOMER_ID, crmCustomerId);
},
logPageView(
context,
{
@ -787,6 +862,7 @@ export const actions = {
}
);
},
logCustomEvent(
context,
{
@ -1091,6 +1167,121 @@ export const actions = {
});
},
getShopTimeSlots(context, { startDate, endDate, shopAppointmentType, providerNumber }) {
const order = context.state.order;
const vehicle = context.state.order.vehicle;
let partNumbers = [
...(order.lineItems.supportingItems ?? []),
...(order.lineItems.vaps ?? []),
...getFlattenedArrayOfLineItemsWithChildParts(order.lineItems.glassParts),
];
partNumbers = partNumbers.map((lineItem) => {
return lineItem.partNumber;
});
const glassPieces = order.damage.glassToReplace
? convertGlassPieceToBackEndCompatibleFormat(order.damage.glassToReplace)
: [];
var payload = {
providerNumber: providerNumber,
startDate: startDate,
endDate: endDate,
shopAppointmentType: shopAppointmentType,
applicationName: applicationConfig.APPLICATION_NAME,
parentAccountNumber: context.getters.payment.parentAccountNumber,
carId: vehicle.carId,
partNumbers: partNumbers,
glassPieces: glassPieces,
eon: order.eon,
coverage: {
status: "",
deductible: 0,
additionalAuthFlag: "",
},
partSelection: {
// TODO: Provisional booking will utilize these fields
hasAnsweredPartQuestions: false,
hasAnsweredMoldingQuestions: false,
hasAnsweredCapabilityQuestions: false,
hasManuallySelectedParts: false,
},
vehicle: {
year: vehicle.year,
make: vehicle.make,
model: vehicle.model,
style: vehicle.style,
vin: vehicle.vin ?? "",
},
};
return globalMethods.callHttpClient({
method: endpoints.GetShopTimeSlots.method,
endpoint: endpoints.GetShopTimeSlots.url,
payload: payload,
});
},
getMobileTimeSlots(context, { startDate, endDate }) {
const order = context.state.order;
const vehicle = context.state.order.vehicle;
let partNumbers = [
...(order.lineItems.supportingItems ?? []),
...(order.lineItems.vaps ?? []),
...getFlattenedArrayOfLineItemsWithChildParts(order.lineItems.glassParts),
];
partNumbers = partNumbers.map((lineItem) => {
return lineItem.partNumber;
});
const glassPieces = order.damage.glassToReplace
? convertGlassPieceToBackEndCompatibleFormat(order.damage.glassToReplace)
: [];
var payload = {
startDate: startDate,
endDate: endDate,
applicationName: applicationConfig.APPLICATION_NAME,
parentAccountNumber: context.getters.payment.parentAccountNumber,
carId: vehicle.carId,
partNumbers: partNumbers,
glassPieces: glassPieces,
eon: order.eon,
coverage: {
status: "",
deductible: 0,
additionalAuthFlag: "",
},
partSelection: {
// TODO: Provisional booking will utilize these fields
hasAnsweredPartQuestions: false,
hasAnsweredMoldingQuestions: false,
hasAnsweredCapabilityQuestions: false,
hasManuallySelectedParts: false,
},
vehicle: {
year: vehicle.year,
make: vehicle.make,
model: vehicle.model,
style: vehicle.style,
vin: vehicle.vin ?? "",
},
zipCode: order.serviceLocation.zipCode,
};
return globalMethods.callHttpClient({
method: endpoints.GetMobileTimeSlots.method,
endpoint: endpoints.GetMobileTimeSlots.url,
payload: payload,
});
},
getMobilePremiumFee(context) {
const damageType = context.getters.damage.isRepair ? "Repair" : "Replace";
const paymentType = context.getters.order.payment.isInsurance ? "Insurance" : "Cash";
return globalMethods.callHttpClient({
method: endpoints.GetMobilePremiumFee.method,
endpoint: `${endpoints.GetMobilePremiumFee.url}/${paymentType}/${damageType}`,
});
},
// Session API Actions
saveSession(context) {
const vehicle = context.getters.vehicle;
@ -1166,12 +1357,23 @@ export const actions = {
isVehicleProtected: order.serviceLocation.isVehicleProtected,
provider: {
providerNumber: order.serviceLocation.provider?.providerNumber,
address: order.serviceLocation.provider?.address,
city: order.serviceLocation.provider?.city,
state: order.serviceLocation.provider?.state,
zip: order.serviceLocation.provider?.zip,
address: {
streetAddress:
order.serviceLocation.provider?.address?.streetAddress,
city: order.serviceLocation.provider?.address?.city,
state: order.serviceLocation.provider?.address?.state,
zip: order.serviceLocation.provider?.address?.zip,
zipCtu: order.serviceLocation.provider?.address?.zipCtu,
},
},
},
schedule: {
date: order.schedule?.date,
startTime: order.schedule?.startTime,
endTime: order.schedule?.endTime,
routeCode: order.schedule?.routeCode,
jobMaxMinutes: order.schedule?.jobMaxMinutes,
},
existingPromoCode: null,
referralCorrelationId: order.referralCorrelationId,
referralDate: order.referralDate,
@ -1182,6 +1384,7 @@ export const actions = {
},
});
},
loadSession(
context,
{
@ -1208,7 +1411,7 @@ export const actions = {
},
})
.then(
(response) => {
async (response) => {
// Flatten location and name properties
response.data.order.damage?.glassToReplace?.map((glass) => {
glass.glassLocation = glass.location;
@ -1222,10 +1425,13 @@ export const actions = {
if (context.state.order.eon && context.state.order.eon != response.data.eon) {
context.commit(storeMutations.RESET_STATE);
}
context.commit(
storeMutations.UPDATE_STATE_WITH_ORDER_INFORMATION,
response.data
);
await resetScheduleIfUnavailable(context, response.data.order);
return response;
},
(error) => {
@ -1259,6 +1465,7 @@ export const actions = {
context.commit(storeMutations.UPDATE_YEAR, year);
}
},
saveVehicleMake(context, make) {
//Reset dependent state when changing
if (context.state.order.vehicle.make !== make) {
@ -1279,6 +1486,7 @@ export const actions = {
context.commit(storeMutations.UPDATE_MAKE, make);
}
},
saveVehicleModel(context, model) {
//Reset dependent state when changing
if (context.state.order.vehicle.model !== model) {
@ -1298,6 +1506,7 @@ export const actions = {
context.commit(storeMutations.UPDATE_MODEL, model);
}
},
saveVehicleStyle(context, style) {
//Reset dependent state when changing
if (context.state.order.vehicle.style !== style) {
@ -1316,6 +1525,7 @@ export const actions = {
context.commit(storeMutations.UPDATE_STYLE, style);
}
},
saveVehicleDamage(
context,
{ isWindshieldRepair, selectedGlassToReplace, selectedWindshieldChipCount }
@ -1373,6 +1583,7 @@ export const actions = {
context.commit(storeMutations.UPDATE_REGISTRATION, registrationInfo);
}
},
saveRegistrationLicensePlateLookup(
context,
{ isSelectedGlassAvailableForVehicle, vehicleInfo, registrationInfo }
@ -1394,6 +1605,7 @@ export const actions = {
context.commit(storeMutations.UPDATE_REGISTRATION, registrationInfo);
}
},
saveRegistrationAddressLookup(
context,
{ isSelectedGlassAvailableForVehicle, vehicleInfo, registrationInfo }
@ -1419,6 +1631,7 @@ export const actions = {
context.commit(storeMutations.UPDATE_REGISTRATION, registrationInfo);
}
},
savePartQuestionAnswers(context, partQuestionAnswersArray) {
// if part question answers have changed, reset subsequent question answers
const sortedPreviousResultsArray = sortArrayOfObjectsByPropertyValue(
@ -1457,6 +1670,7 @@ export const actions = {
//Save new values
context.commit(storeMutations.UPDATE_PART_QUESTION_ANSWERS, partQuestionAnswersArray);
},
resetMoldingAndCapabilityQuestionAnswersIfNeeded(context, matchedParts) {
const partsOrQuestionsDataToCompareWith =
context.getters.pageData(fmgPageValues.MOLDING_QUESTIONS)?.partsOrQuestions ??
@ -1496,6 +1710,7 @@ export const actions = {
});
}
},
saveMoldingQuestionAnswers(context, moldingQuestionAnswers) {
const sortedPreviousResultsArray = sortArrayOfObjectsByPropertyValue(
context.getters.damage.moldingQuestionAnswers,
@ -1524,6 +1739,7 @@ export const actions = {
//Save new values
context.commit(storeMutations.UPDATE_MOLDING_QUESTION_ANSWERS, moldingQuestionAnswers);
},
saveCapabilityQuestionAnswers(context, capabilityQuestionAnswers) {
const sortedPreviousResultsArray = sortArrayOfObjectsByPropertyValue(
context.getters.damage.capabilityQuestionAnswers,
@ -1550,18 +1766,32 @@ export const actions = {
capabilityQuestionAnswers
);
},
savePaymentType(context, isInsurance) {
context.commit(storeMutations.UPDATE_IS_INSURANCE, isInsurance);
},
saveParentAccountNumber(context, parentAccountNumber) {
context.commit(storeMutations.UPDATE_PARENT_ACCT_NUMBER, parentAccountNumber);
},
saveSupportingItems(context, supportingItems) {
if (!deepEqual(supportingItems, context.state.order.lineItems.supportingItems)) {
context.commit(storeMutations.RESET_SERVICE_LOCATION_APPOINTMENT_TYPE);
context.commit(storeMutations.RESET_SERVICE_LOCATION_PROVIDER);
}
context.commit(storeMutations.UPDATE_SUPPORTING_ITEMS, supportingItems);
},
saveSupportingItemsSuppressingStateResetting(context, supportingItems) {
context.commit(storeMutations.UPDATE_SUPPORTING_ITEMS, supportingItems);
},
saveVaps(context, vaps) {
context.commit(storeMutations.UPDATE_VAPS, vaps);
},
// Price order actions
async priceOrderItemsAndSaveServerData(
context,
@ -1598,7 +1828,6 @@ export const actions = {
`&${availableLineItemsFormattedForRequest}`;
const lineItemServerData = context.getters.order.lineItems.serverData;
if (lineItemServerData) {
queryString += `&ServerData=${encodeURIComponent(lineItemServerData)}`;
}
@ -1614,13 +1843,33 @@ export const actions = {
return availableLineItems;
},
// Misc order actions
saveSchedule(context, scheduleInfo) {
context.commit(storeMutations.UPDATE_SCHEDULE, scheduleInfo);
},
saveServiceZipCodeInfo(context, serviceZipCodeInfo) {
if (
context.state.order.serviceLocation &&
serviceZipCodeInfo.zipCode !== context.state.order.serviceLocation.zipCode
) {
context.commit(storeMutations.RESET_SERVICE_LOCATION_APPOINTMENT_TYPE);
context.commit(storeMutations.RESET_SERVICE_LOCATION_PROVIDER);
context.commit(storeMutations.RESET_SERVICE_LOCATION_MOBILE_ADDRESS);
}
context.commit(storeMutations.UPDATE_SERVICE_LOCATION, serviceZipCodeInfo);
},
saveServiceLocation(context, serviceLocationInfo) {
context.commit(storeMutations.UPDATE_SERVICE_LOCATION, serviceLocationInfo);
},
saveEmail(context, email) {
context.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, email);
},
saveVin(context, { isSelectedGlassAvailableForVehicle, vehicleInfo }) {
//Reset dependent state when changing
if (vehicleInfo.vin !== context.state.order.vehicle.vin) {
@ -1633,12 +1882,24 @@ export const actions = {
context.commit(storeMutations.UPDATE_VEHICLE, vehicleInfo);
}
},
saveGlassParts(context, parts) {
if (!deepEqual(parts, context.state.order.lineItems.glassParts)) {
context.commit(storeMutations.RESET_SERVICE_LOCATION_APPOINTMENT_TYPE);
context.commit(storeMutations.RESET_SERVICE_LOCATION_PROVIDER);
}
context.commit(storeMutations.UPDATE_GLASS_PARTS, parts);
},
saveGlassPartPrices(context, parts) {
context.commit(storeMutations.UPDATE_GLASS_PARTS, parts);
},
clearVin(context) {
context.commit(storeMutations.UPDATE_VEHICLE_VIN, null);
},
isVinOptionalVehicle(context) {
switch (context.state.order.vehicle.make.toLowerCase()) {
case "mercedes benz":
@ -1780,7 +2041,7 @@ function addPricesToLineItems(lineItems, pricingLineItems) {
function getFlattenedArrayOfLineItemsWithChildParts(lineItems) {
let flattenedArray = [];
lineItems.forEach((lineItem) => {
lineItems?.forEach((lineItem) => {
flattenedArray.push(lineItem);
if (lineItem.childParts) {
flattenedArray = [
@ -1802,3 +2063,126 @@ function buildQueryStringParameterFromArrayOfComplexObjects(arrayOfObjects, para
// Remove trailing &
return queryStringParameter.slice(0, -1);
}
function convertGlassPieceToBackEndCompatibleFormat(glassPieces) {
return glassPieces.map((glassPiece) => {
return {
location: glassPiece.glassLocation,
name: glassPiece.glassName,
};
});
}
// This function will verify schedule info is still valid.
// check to see if we have an appointment date on the order object.
// if so, make sure it's not in the past. if in the past, clear schedule info in store.
// if date not in past, then call schedule service to verify appointment is still available.
async function resetScheduleIfUnavailable(context, order) {
if (!order.schedule?.date) {
return;
}
// Date string with slashes is parsed as local time, not UTC. Our date has dashes, '-'.
// If you put any kind of time stamp on the date string with dashes, then it IS parsed as local time.
var aptDate = new Date(order.schedule.date + "T00:00:00");
var curDate = new Date();
// if appointment date is in the past, clear schedule
if (aptDate.getTime() < curDate.getTime()) {
context.commit(storeMutations.RESET_SCHEDULE);
return;
}
// create date range to pass to the schedule service to see if our appointment is still available.
var endRange = new Date(aptDate);
endRange.setDate(aptDate.getDate() + 1);
var endDay = "" + endRange.getDate();
var endMonth = "" + (endRange.getMonth() + 1); // 0 based so add 1
const endYear = endRange.getFullYear();
if (endMonth.length < 2) {
endMonth = "0" + endMonth;
}
if (endDay.length < 2) {
endDay = "0" + endDay;
}
const endDate = [endYear, endMonth, endDay].join("-");
let newTimeSlotsResponse;
if (order.serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE) {
newTimeSlotsResponse = await context.dispatch(
storeActions.GET_MOBILE_TIME_SLOTS,
{
startDate: order.schedule.date,
endDate: endDate,
},
false
);
if (newTimeSlotsResponse?.data.days?.length === 0) {
context.commit(storeMutations.RESET_SCHEDULE);
return;
}
var mobileRouteCodeFound = false;
// if early bird fee is in supporting items then need to check the timeslot to see if offer premium is also still available
if (
order.lineItem?.supportingItems?.findIndex(
(item) => item.partType == PREMIUM_FEE_PART_TYPE
)
) {
newTimeSlotsResponse.data.days?.forEach((day) => {
day.timeSlots.forEach((ts) => {
if (ts.id === order.schedule.routeCode && ts.offerPremium) {
mobileRouteCodeFound = true;
}
});
});
} else {
newTimeSlotsResponse.data.days?.forEach((day) => {
day.timeSlots.forEach((ts) => {
if (ts.id === order.schedule.routeCode) {
mobileRouteCodeFound = true;
}
});
});
}
if (!mobileRouteCodeFound) {
context.commit(storeMutations.RESET_SCHEDULE);
return;
}
} else {
newTimeSlotsResponse = await context.dispatch(
storeActions.GET_SHOP_TIME_SLOTS,
{
startDate: order.schedule.date,
endDate: endDate,
shopAppointmentType: order.serviceLocation.appointmentType,
providerNumber: order.serviceLocation.provider.providerNumber,
},
false
);
if (newTimeSlotsResponse?.data.days?.length === 0) {
context.commit(storeMutations.RESET_SCHEDULE);
return;
}
var routeCodeFound = false;
newTimeSlotsResponse.data.days?.forEach((day) => {
day.timeSlots.forEach((ts) => {
if (ts.id === order.schedule.routeCode) {
routeCodeFound = true;
}
});
});
if (!routeCodeFound) {
context.commit(storeMutations.RESET_SCHEDULE);
return;
}
}
}

5
src/store/store.spec.js
View file

@ -961,7 +961,10 @@ describe("Actions", () => {
it("saveGlassParts, should call mutation", () => {
// Arrange
const context = state;
const context = {
state: state,
};
const commit = jest.fn();
context.commit = commit;

6
src/styles/common-styles.scss
View file

@ -56,3 +56,9 @@ body {
height: calc(100% - 72px);
}
}
//Disable scroll of main container when modal is open
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
}

1
src/styles/shared-input-button-styles.scss
View file

@ -9,6 +9,7 @@
position: relative;
z-index: 5;
@include box-shadow-hover($blue-300);
border-radius: 0.5rem;
}
}
}

3
src/styles/ux-variables.scss
View file

@ -190,3 +190,6 @@ $alert-color-scale: 40%;
// This affects all [Bootstrap] modals
$modal-fade-transform: translate(0, 100%);
$modal-backdrop-opacity: 0;
//Disable default !important behavior
$enable-important-utilities: false;

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

@ -15,7 +15,6 @@ describe("alert.vue", () => {
},
})
);
const wrapperDiv = wrapper.find("div");
// Assert
@ -49,7 +48,7 @@ describe("alert.vue", () => {
expect(wrapper.vm.alertCopy).toBe("testCopy");
});
it("Should container a <router-link> tag if the manualCopy contains a {routerLink: testName, testLink} placeholder", () => {
it("Should container a <textBlock> tag if the manualCopy contains a {routerLink: testName, testLink} placeholder", () => {
// Arrange & Act
const wrapper = shallowMount(
alert,
@ -58,11 +57,12 @@ describe("alert.vue", () => {
manualHeadline: "testHeader",
manualCopy: "testCopy with a {routerLink: testName, testLink} inside of it",
},
stubs: ["router-link"],
stubs: ["textBlock"],
})
);
// Assert
expect(wrapper.find("router-link").exists()).toBe(true);
expect(wrapper.html()).toEqual(expect.stringContaining("text-block-stub"));
});
it("Should contain 'n+1' <p> tags if the body copy has 'n' <p> tags", () => {

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

@ -14,17 +14,11 @@
v-if="!doesCopyContainRouterLink(paragraph) && !doesCopyContainTextLink(paragraph)"
v-html="paragraph"></p>
<p class="m-0 text-body small" v-else>
<template v-for="copy in splitCopyOnCMSPlaceHolder(paragraph)" :key="copy">
<span v-if="doesCopyContainRouterLink(copy)">
<router-link
:to="{
query: { [pageQueryString]: `${getRouterLinkRouteFromCopy(copy)}` },
name: 'root',
}"
>{{ getRouterLinkDisplayTextFromCopy(copy) }}</router-link
>
</span>
<span v-else-if="doesCopyContainTextLink(copy)">
<template v-if="doesCopyContainRouterLink(paragraph)">
<textBlock :customText="paragraph" class="mb-1" marginTopSizeOverride="0" />
</template>
<template v-else v-for="copy in splitCopyOnCMSPlaceHolder(paragraph)" :key="copy">
<span v-if="doesCopyContainTextLink(copy)">
<textLink
linkType="text"
:text="getRouterLinkDisplayTextFromCopy(copy)"
@ -59,6 +53,7 @@ import {
} from "@/helpers/cms-content-helper";
import textLink from "@/ux-components/text-link/text-link";
import { applicationConfig } from "@/constants/application-config";
import textBlock from "@/digital-components/text-block/text-block";
export default {
name: "alert",
@ -136,6 +131,7 @@ export default {
},
components: {
textLink,
textBlock,
},
};
</script>
@ -204,7 +200,7 @@ export default {
}
& p {
font-size: 0.875rem;
margin-bottom: 0.25rem !important;
margin-bottom: 0.25rem;
}
}
</style>

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

@ -57,7 +57,9 @@ describe("list-button-horizontal.vue", () => {
const { wrapper } = setupMocks({
mockData: {
propsData: {
additionalButtonStyling: "listButtonHorizontalStrong",
additionalButtonData: {
additionalButtonStyling: "listButtonHorizontalStrong",
},
},
},
});

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

@ -30,7 +30,9 @@ export default {
mixins: [inputButtonWrapperMixin],
computed: {
isStrongStyling() {
return this.additionalButtonStyling === "listButtonHorizontalStrong";
return (
this.additionalButtonData?.additionalButtonStyling === "listButtonHorizontalStrong"
);
},
},
components: {

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

@ -94,7 +94,7 @@ export default {
+ .list-card-content {
outline: none;
display: block;
display: flex;
position: relative;
p {

11
src/ux-components/loader/loader.vue
View file

@ -3,7 +3,7 @@
class="loader"
role="alert"
aria-label="Loading new page"
v-bind:class="[this.loaderColor, this.loaderPosition]"></div>
v-bind:class="[this.loaderColor, this.loaderPosition, this.blockUi]"></div>
</template>
<script>
@ -19,6 +19,11 @@ export default {
loaderPosition: {
type: String,
},
/* Controls whether we block the UI when the loader is active or now, defaults to true*/
blockUi: {
type: Boolean,
default: true,
},
},
};
</script>
@ -82,5 +87,9 @@ export default {
&.black:after {
background-color: $black;
}
&.no-block::before {
z-index: -1;
}
}
</style>