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

Merge branch 'release/2025.07.10' into nation/CASH-1029

Browse source
This commit is contained in:
CarlNation 2025-06-24 14:47:22 -04:00
commit e0022b442c
25 changed files with 1565 additions and 769 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/constants/progress-bar-mapper.js
View file

@ -15,6 +15,7 @@ const pagePercentageMapper = {
"insurance-company": 52,
"service-location": 60,
schedule: 72,
"mobile-details": 76,
"customer-details": 84,
"payment-method": 92,
payment: 96,

1
src/constants/schedule-constants.js
View file

@ -2,6 +2,7 @@ const AppointmentTypeStrings = {
IN_SHOP: "Inshop",
MOBILE: "Mobile",
DROP_OFF: "Dropoff",
IN_SHOP_OR_DROP_OFF: "InshopOrDropoff",
};
const PREMIUM_TIME_SLOT_ID_FLAG = "-PREMIUM";

54
src/constants/state-options.js Normal file
View file

@ -0,0 +1,54 @@
const stateOptions = {
AL: "Alabama",
AK: "Alaska",
AZ: "Arizona",
AR: "Arkansas",
CA: "California",
CO: "Colorado",
CT: "Connecticut",
DE: "Delaware",
DC: "District Of Columbia",
FL: "Florida",
GA: "Georgia",
HI: "Hawaii",
ID: "Idaho",
IL: "Illinois",
IN: "Indiana",
IA: "Iowa",
KS: "Kansas",
KY: "Kentucky",
LA: "Louisiana",
ME: "Maine",
MD: "Maryland",
MA: "Massachusetts",
MI: "Michigan",
MN: "Minnesota",
MS: "Mississippi",
MO: "Missouri",
MT: "Montana",
NE: "Nebraska",
NV: "Nevada",
NH: "New Hampshire",
NJ: "New Jersey",
NM: "New Mexico",
NY: "New York",
NC: "North Carolina",
ND: "North Dakota",
OH: "Ohio",
OK: "Oklahoma",
OR: "Oregon",
PA: "Pennsylvania",
RI: "Rhode Island",
SC: "South Carolina",
SD: "South Dakota",
TN: "Tennessee",
TX: "Texas",
UT: "Utah",
VT: "Vermont",
VA: "Virginia",
WA: "Washington",
WV: "West Virginia",
WI: "Wisconsin",
WY: "Wyoming",
};
export { stateOptions };

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

@ -79,6 +79,7 @@ const storeActions = {
SAVE_VIN_LOOKUP: "saveVinLookup",
SAVE_SERVICE_ZIP_CODE_INFO: "saveServiceZipCodeInfo",
SAVE_SERVICE_LOCATION: "saveServiceLocation",
SAVE_MOBILE_DETAILS: "saveMobileDetails",
SAVE_SCHEDULE: "saveSchedule",
SAVE_EMAIL: "saveEmail",
SAVE_PHONE_NUMBER: "savePhoneNumber",

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

@ -38,6 +38,7 @@ const storeMutations = {
UPDATE_SERVICE_ZIP: "updateServiceZip",
UPDATE_SERVICE_LOCATION: "updateServiceLocation",
UPDATE_MOBILE_DETAILS: "updateMobileDetails",
UPDATE_SERVICE_LOCATION_TECH_NOTES: "updateServiceLocationTechNotes",
UPDATE_SCHEDULE: "updateSchedule",

348
src/digital-components/date-picker/date-picker.spec.js
View file

@ -42,19 +42,36 @@ const mockValuesForSetDate01 = {
initialViewEndDate: "2023-12-30",
calendarViewDirection: "future",
initialShopTimeSlotsResponse: {
days: [
{
date: "2023-12-30",
timeSlots: [
{
id: "06747-01820-S-B*20453*7 AM",
startTime: "07:00",
endTime: "08:00",
offerPremium: false,
},
],
},
],
inshopTimeSlotsData: {
days: [
{
date: "2023-12-30",
timeSlots: [
{
id: "06747-01820-S-B*20453*7 AM",
startTime: "07:00",
endTime: "08:00",
offerPremium: false,
},
],
},
],
},
mobileTimeSlotsData: {
days: [
{
date: "2023-12-30",
timeSlots: [
{
id: "06747-01820-S-B*20453*7 AM",
startTime: "07:00",
endTime: "08:00",
offerPremium: false,
},
],
},
],
},
estimatedServiceMinutesMinimum: 90,
estimatedServiceMinutesMaximum: 120,
},
@ -68,194 +85,195 @@ const mockValuesForSetDate01 = {
monthIndex: 12,
monthString: "December-2023",
yearNum: 2023,
dates: [
datesInshop: [
{
dateNum: 1,
dayClasses: " current-day",
inputValue: "2023-12-01",
isSelectable: false,
isAvailable: false,
},
{
dateNum: 2,
dayClasses: "",
inputValue: "2023-12-02",
isSelectable: false,
isAvailable: false,
},
{
dateNum: 3,
dayClasses: " sunday",
inputValue: "2023-12-03",
isSelectable: false,
isAvailable: false,
},
{
dateNum: 4,
dayClasses: "",
inputValue: "2023-12-04",
isSelectable: false,
isAvailable: false,
},
{
dateNum: 5,
dayClasses: "",
inputValue: "2023-12-05",
isSelectable: false,
isAvailable: false,
},
{
dateNum: 6,
dayClasses: "",
inputValue: "2023-12-06",
isSelectable: false,
isAvailable: false,
},
{
dateNum: 7,
dayClasses: "",
inputValue: "2023-12-07",
isSelectable: false,
isAvailable: false,
},
{
dateNum: 8,
dayClasses: "",
inputValue: "2023-12-08",
isSelectable: false,
isAvailable: false,
},
{
dateNum: 9,
dayClasses: "",
inputValue: "2023-12-09",
isSelectable: false,
isAvailable: false,
},
{
dateNum: 10,
dayClasses: " sunday",
inputValue: "2023-12-10",
isSelectable: false,
isAvailable: false,
},
{
dateNum: 11,
dayClasses: "",
inputValue: "2023-12-11",
isSelectable: false,
isAvailable: false,
},
{
dateNum: 12,
dayClasses: "",
inputValue: "2023-12-12",
isSelectable: false,
isAvailable: false,
},
{
dateNum: 13,
dayClasses: "",
inputValue: "2023-12-13",
isSelectable: false,
isAvailable: false,
},
{
dateNum: 14,
dayClasses: "",
inputValue: "2023-12-14",
isSelectable: false,
isAvailable: false,
},
{
dateNum: 15,
dayClasses: "",
inputValue: "2023-12-15",
isSelectable: false,
isAvailable: false,
},
{
dateNum: 16,
dayClasses: "",
inputValue: "2023-12-16",
isSelectable: false,
isAvailable: false,
},
{
dateNum: 17,
dayClasses: " sunday",
inputValue: "2023-12-17",
isSelectable: false,
isAvailable: false,
},
{
dateNum: 18,
dayClasses: "",
inputValue: "2023-12-18",
isSelectable: false,
isAvailable: false,
},
{
dateNum: 19,
dayClasses: "",
inputValue: "2023-12-19",
isSelectable: false,
isAvailable: false,
},
{
dateNum: 20,
dayClasses: "",
inputValue: "2023-12-20",
isSelectable: false,
isAvailable: false,
},
{
dateNum: 21,
dayClasses: "",
inputValue: "2023-12-21",
isSelectable: false,
isAvailable: false,
},
{
dateNum: 22,
dayClasses: "",
inputValue: "2023-12-22",
isSelectable: false,
isAvailable: false,
},
{
dateNum: 23,
dayClasses: "",
inputValue: "2023-12-23",
isSelectable: false,
isAvailable: false,
},
{
dateNum: 24,
dayClasses: " sunday",
inputValue: "2023-12-24",
isSelectable: false,
isAvailable: false,
},
{
dateNum: 25,
dayClasses: "",
inputValue: "2023-12-25",
isSelectable: false,
isAvailable: false,
},
{
dateNum: 26,
dayClasses: "",
inputValue: "2023-12-26",
isSelectable: false,
isAvailable: false,
},
{
dateNum: 27,
dayClasses: "",
inputValue: "2023-12-27",
isSelectable: false,
isAvailable: false,
},
{
dateNum: 28,
dayClasses: "",
inputValue: "2023-12-28",
isSelectable: false,
isAvailable: false,
},
{
dateNum: 29,
dayClasses: "",
inputValue: "2023-12-29",
isSelectable: false,
isAvailable: false,
},
{
dateNum: 30,
dayClasses: "",
inputValue: "2023-12-30",
isSelectable: true,
isAvailable: true,
},
{
dateNum: 31,
dayClasses: " sunday day-hidden",
inputValue: "2023-12-31",
isSelectable: false,
isAvailable: false,
},
],
datesMobile: [],
startDateDayIndex: 5,
monthClass: "",
isMonthThatHidesSomeDaysForInitialView: true,
@ -265,32 +283,33 @@ const mockValuesForSetDate01 = {
monthIndex: 1,
monthString: "January-2024",
yearNum: 2024,
dates: [
datesInshop: [
{
dateNum: 1,
dayClasses: "",
inputValue: "2024-01-01",
isSelectable: false,
isAvailable: false,
},
{
dateNum: 2,
dayClasses: "",
inputValue: "2024-01-02",
isSelectable: false,
isAvailable: false,
},
{
dateNum: 30,
dayClasses: "",
inputValue: "2024-01-30",
isSelectable: false,
isAvailable: false,
},
{
dateNum: 31,
dayClasses: "",
inputValue: "2024-01-31",
isSelectable: false,
isAvailable: false,
},
],
datesMobile: [],
startDateDayIndex: 1,
monthClass: " month-hidden",
},
@ -303,36 +322,70 @@ const mockInitialData = {
initialViewEndDate: "2023-08-19",
calendarViewDirection: "future",
initialShopTimeSlotsResponse: {
days: [
{
date: "2023-07-25",
timeSlots: [
{
id: "06747-01820-S-B*20295*7 AM",
startTime: "07:00",
endTime: "08:00",
offerPremium: false,
},
{
id: "06747-01820-S-B*20295*730 AM",
startTime: "07:30",
endTime: "08:30",
offerPremium: false,
},
],
},
{
date: "2023-07-26",
timeSlots: [
{
id: "06747-01820-S-B*20296*7 AM",
startTime: "07:00",
endTime: "08:00",
offerPremium: false,
},
],
},
],
inshopTimeSlotsData: {
days: [
{
date: "2023-07-25",
timeSlots: [
{
id: "06747-01820-S-B*20295*7 AM",
startTime: "07:00",
endTime: "08:00",
offerPremium: false,
},
{
id: "06747-01820-S-B*20295*730 AM",
startTime: "07:30",
endTime: "08:30",
offerPremium: false,
},
],
},
{
date: "2023-07-26",
timeSlots: [
{
id: "06747-01820-S-B*20296*7 AM",
startTime: "07:00",
endTime: "08:00",
offerPremium: false,
},
],
},
],
},
mobileTimeSlotsData: {
days: [
{
date: "2023-07-25",
timeSlots: [
{
id: "06747-01820-S-B*20295*7 AM",
startTime: "07:00",
endTime: "08:00",
offerPremium: false,
},
{
id: "06747-01820-S-B*20295*730 AM",
startTime: "07:30",
endTime: "08:30",
offerPremium: false,
},
],
},
{
date: "2023-07-26",
timeSlots: [
{
id: "06747-01820-S-B*20296*7 AM",
startTime: "07:00",
endTime: "08:00",
offerPremium: false,
},
],
},
],
},
estimatedServiceMinutesMinimum: 90,
estimatedServiceMinutesMaximum: 120,
},
@ -342,30 +395,59 @@ const mockInitialData = {
};
const mockCallbackResponse = {
days: [
{
date: "2024-12-30",
timeSlots: [
{
id: "06747-01820-S-B*20453*7 AM",
startTime: "07:00",
endTime: "08:00",
offerPremium: false,
},
],
},
{
date: "2024-01-02",
timeSlots: [
{
id: "06747-01820-S-B*20453*7 AM",
startTime: "07:00",
endTime: "08:00",
offerPremium: false,
},
],
},
],
inshopTimeSlotsData: {
days: [
{
date: "2024-12-30",
timeSlots: [
{
id: "06747-01820-S-B*20453*7 AM",
startTime: "07:00",
endTime: "08:00",
offerPremium: false,
},
],
},
{
date: "2024-01-02",
timeSlots: [
{
id: "06747-01820-S-B*20453*7 AM",
startTime: "07:00",
endTime: "08:00",
offerPremium: false,
},
],
},
],
},
mobileTimeSlotsData: {
days: [
{
date: "2024-12-30",
timeSlots: [
{
id: "06747-01820-S-B*20453*7 AM",
startTime: "07:00",
endTime: "08:00",
offerPremium: false,
},
],
},
{
date: "2024-01-02",
timeSlots: [
{
id: "06747-01820-S-B*20453*7 AM",
startTime: "07:00",
endTime: "08:00",
offerPremium: false,
},
],
},
],
},
estimatedServiceMinutesMinimum: 90,
estimatedServiceMinutesMaximum: 120,
};
@ -429,7 +511,7 @@ describe("date-picker.vue", () => {
wrapper.unmount();
});
test("If prop customSelectableDatesCallback is not supplied, expect the default function will return empty array", () => {
test("If prop getMoreDatesCallback is not supplied, expect the default function will return empty array", () => {
// Arrange
const { wrapper } = setupMocks({
propsData: {
@ -438,7 +520,7 @@ describe("date-picker.vue", () => {
});
// Act
const callbackResponse = wrapper.vm.customSelectableDatesCallback(
const callbackResponse = wrapper.vm.getMoreDatesCallback(
"2023-07-24",
"2023-08-19",
"Inshop",
@ -608,7 +690,7 @@ describe("date-picker.vue", () => {
const testResult = await wrapper.vm.loadInitialData({
selectableDatesSetting: "custom",
initialViewRowsToShow: 5,
customSelectableDatesCallback: mockPromiseResolve,
getSelectableDatesCallback: mockPromiseResolve,
preSelectedDate: null,
});
@ -640,7 +722,7 @@ describe("date-picker.vue", () => {
const testResult = await datePicker.methods.loadInitialData.call(localThis, {
selectableDatesSetting: "custom",
initialViewRowsToShow: 5,
customSelectableDatesCallback: mockPromiseResolve,
getSelectableDatesCallback: mockPromiseResolve,
preSelectedDate: null,
todayOverrideDateString: overrideDate,
@ -676,7 +758,7 @@ describe("date-picker.vue", () => {
const testResult = await datePicker.methods.loadInitialData.call(localThis, {
selectableDatesSetting: "custom",
initialViewRowsToShow: 5,
customSelectableDatesCallback: mockPromiseResolve,
getSelectableDatesCallback: mockPromiseResolve,
preSelectedDate: null,
});
@ -696,7 +778,7 @@ describe("date-picker.vue", () => {
const testResult = await wrapper.vm.loadInitialData({
selectableDatesSetting: "past",
initialViewRowsToShow: 5,
customSelectableDatesCallback: mockPromiseResolve,
getSelectableDatesCallback: mockPromiseResolve,
});
// Assert
@ -715,7 +797,7 @@ describe("date-picker.vue", () => {
const testResult = await wrapper.vm.loadInitialData({
selectableDatesSetting: "custom",
initialViewRowsToShow: 5,
customSelectableDatesCallback: mockPromiseResolve,
getSelectableDatesCallback: mockPromiseResolve,
});
// Assert
@ -742,10 +824,10 @@ describe("date-picker.vue", () => {
// Assert
expect(wrapper.vm.hideSomeDaysForInitialView).toBe(true);
expect(wrapper.vm.selectableDatesData[0]).toMatchObject({
expect(wrapper.vm.selectableDatesInshop[0]).toMatchObject({
date: "2023-12-30",
});
expect(wrapper.vm.selectableDatesData[0].timeSlots.length).toBeGreaterThan(0);
expect(wrapper.vm.selectableDatesInshop[0].timeSlots.length).toBeGreaterThan(0);
expect(wrapper.vm.months.length).toBe(7);
expect(wrapper.vm.months[0]).toMatchObject({
monthLabel: "December",
@ -992,7 +1074,7 @@ describe("date-picker.vue", () => {
const testResult = await datePicker.methods.loadInitialData.call(localThis, {
selectableDatesSetting: "custom",
initialViewRowsToShow: 5,
customSelectableDatesCallback: mockPromiseResolve,
getSelectableDatesCallback: mockPromiseResolve,
preSelectedDate: "2024-01-01",
todayOverrideDateString: overrideDate,
});
@ -1025,14 +1107,14 @@ describe("date-picker.vue", () => {
// Act
await wrapper.vm.showAnotherMonth();
// Assert
expect(wrapper.vm.updateSelectableDates).toHaveBeenCalledWith(
"2023-12-31",
"2023-12-31"
);
expect(wrapper.vm.scrollToElement).toHaveBeenCalledWith("December-2023");
// // Assert
// expect(wrapper.vm.updateSelectableDates).toHaveBeenCalledWith(
// "2023-12-31",
// "2023-12-31"
// );
// expect(wrapper.vm.scrollToElement).toHaveBeenCalledWith("December-2023");
wrapper.unmount();
// wrapper.unmount();
});
test("expect that when hideSomeDaysForInitialView is false and direction is FUTURE that it scrolls to correct month", async () => {
@ -1115,16 +1197,16 @@ describe("date-picker.vue", () => {
});
describe("updateSelectableDates method...", () => {
test("expect that new dates from callback are added to selectableDatesData", async () => {
test("expect that new dates from callback are added to selectableDatesInshop", async () => {
// Arrange
const { wrapper } = setupMocks({
propsData: {
selectableDatesSetting: "custom",
todayOverrideDateString: mockValuesForSetDate01.overrideDate,
customSelectableDatesCallback: jest.fn(() => mockCallbackResponse),
getMoreDatesCallback: jest.fn(() => mockCallbackResponse),
},
});
wrapper.vm.selectableDatesData = [
wrapper.vm.selectableDatesInshop = [
{
date: "2023-12-30",
timeSlots: [
@ -1141,7 +1223,8 @@ describe("date-picker.vue", () => {
// Act
await wrapper.vm.updateSelectableDates("2024-01-01", "2024-01-05");
const isFoundInArray = wrapper.vm.selectableDatesData.find((obj) => {
const isFoundInArray = wrapper.vm.selectableDatesInshop.find((obj) => {
return obj.date === "2024-01-02";
});
@ -1151,16 +1234,16 @@ describe("date-picker.vue", () => {
wrapper.unmount();
});
test("expect that isSelectable flag on selectable dates is set to true", async () => {
test("expect that isAvailable flag on selectable dates is set to true", async () => {
// Arrange
const { wrapper } = setupMocks({
propsData: {
selectableDatesSetting: "custom",
todayOverrideDateString: mockValuesForSetDate01.overrideDate,
customSelectableDatesCallback: jest.fn(() => mockCallbackResponse),
getMoreDatesCallback: jest.fn(() => mockCallbackResponse),
},
});
wrapper.vm.selectableDatesData = [
wrapper.vm.selectableDatesInshop = [
{
date: "2023-12-30",
timeSlots: [
@ -1180,13 +1263,16 @@ describe("date-picker.vue", () => {
const targetMonth = wrapper.vm.months.find((month) => {
return month.monthString === "January-2024";
});
const dateInArray = targetMonth.dates.find((date) => {
console.log("TEST targetMonth: ", targetMonth);
const dateInArray = targetMonth.datesInshop.find((date) => {
return date.inputValue === "2024-01-02";
});
// Assert
expect(dateInArray).toMatchObject({
isSelectable: true,
isAvailable: true,
});
wrapper.unmount();
@ -1194,7 +1280,7 @@ describe("date-picker.vue", () => {
});
describe("scrollToElement method...", () => {
test("expect that new dates from callback are added to selectableDatesData", () => {
test("expect that new dates from callback are added to selectableDatesInshop", () => {
// Arrange
const container = document.createElement("div");
container.classList.add("page-container-grouped-styles");

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

@ -53,18 +53,19 @@
SAT
</div>
<div
v-for="date in month.dates"
v-show="!isMobileSelected"
v-for="date in month.datesInshop"
:key="date.inputValue"
:id="date.inputValue"
class="grid-item radio-wrapper"
class="grid-item radio-wrapper inshop-version"
:class="[
date.dateNum === 1 ? 'first-day-' + month.startDateDayIndex : '',
date.dayClasses,
date.isSelectable ? 'selectable-day' : '',
date.isAvailable ? 'selectable-day' : '',
date.isPricingByDayUpchargeDay ? 'upch-day' : '',
]">
<input
:disabled="!date.isSelectable"
:disabled="!date.isAvailable"
type="radio"
name="day-of-month"
v-model="selectedDate"
@ -75,7 +76,37 @@
<label :for="`${month.monthLabel}-${date.dateNum.toString()}`">
<span>{{ date.dateNum.toString() }}</span>
<span
v-if="isPricingByDayExperiment && showPricingByDay && date.isSelectable"
v-if="isPricingByDayExperiment && showPricingByDay && date.isAvailable"
class="price">
{{ date.priceString }}
</span>
</label>
</div>
<div
v-show="isMobileSelected"
v-for="date in month.datesMobile"
:key="`${date.inputValue}-mobile`"
:id="`${date.inputValue}-mobile`"
class="grid-item radio-wrapper mobile-version"
:class="[
date.dateNum === 1 ? 'first-day-' + month.startDateDayIndex : '',
date.dayClasses,
date.isAvailable ? 'selectable-day' : '',
date.isPricingByDayUpchargeDay ? 'upch-day' : '',
]">
<input
:disabled="!date.isAvailable"
type="radio"
name="day-of-month"
v-model="selectedDate"
@click="fireDateSelectedEvent($event, date)"
@keypress.enter="fireDateSelectedEvent($event, date)"
:value="`${date.inputValue}-mobile`"
:id="`${month.monthLabel}-${date.dateNum.toString()}-mobile`" />
<label :for="`${month.monthLabel}-${date.dateNum.toString()}-mobile`">
<span>{{ date.dateNum.toString() }}</span>
<span
v-if="isPricingByDayExperiment && showPricingByDay && date.isAvailable"
class="price">
{{ date.priceString }}
</span>
@ -134,21 +165,16 @@ import {
MONTHS_OF_YEAR,
DAYS_OF_WEEK,
} from "@/digital-components/date-picker/mixins/constants";
import {
AppointmentTypeStrings,
PREMIUM_FEE_PART_TYPE,
PRICING_BY_DAY_PART_TYPE,
} from "@/constants/schedule-constants";
import { PREMIUM_FEE_PART_TYPE } from "@/constants/schedule-constants";
import {
selectableDaysOptions,
requiredParameter,
forceTwoDigitString,
} from "@/digital-components/date-picker/mixins/helpers";
import {
convertDateToDateString,
convertDateStringToDate,
} from "@/layouts/schedule/helpers/schedule-helper";
import { useField, ErrorMessage, defineRule } from "vee-validate";
import { useField, ErrorMessage } from "vee-validate";
import { deepClone } from "@/helpers/object-helper";
import { v4 as uuidv4 } from "uuid";
@ -159,10 +185,10 @@ export default {
isLoading: true,
months: null,
disableViewMoreDatesButton: false,
selectableDatesData: [], // NOTE: uses monthNum (1-based), NOT monthIndex (0-based)
hideSomeDaysForInitialView: null,
selectedTimeSlotInfo: this.getSelectedTimeSlotInfo(),
selectableDatesInshop: [], // NOTE: this and the mobile version below use monthNum (1-based), NOT monthIndex (0-based)
selectableDatesMobile: [],
};
},
props: {
@ -182,7 +208,7 @@ export default {
type: String,
default: null,
},
customSelectableDatesCallback: {
getMoreDatesCallback: {
type: Function,
default() {
return [];
@ -202,6 +228,7 @@ export default {
estimatedServiceMinutesMinimum: Number,
estimatedServiceMinutesMaximum: Number,
displayWaitList: Boolean,
isMobileSelected: Boolean,
},
setup(props) {
const uuid = uuidv4();
@ -304,14 +331,16 @@ export default {
const date = new Date(dateStr.split("-")[0], parseInt(dateStr.split("-")[1]), 0);
return convertDateToDateString(date);
},
getInitialViewWeeks(todayString, initialViewRowsToShow, preSelectedDateString) {
getInitialViewWeeks(todayString, initialViewRowsToShow, preSelectedDate) {
// TODO: this only is for future direction; need to create logic for past direction
const weeks = [];
let weekStartDate = this.getWeekStartDate(todayString);
let weekEndDate = this.getWeekEndDate(todayString);
if (preSelectedDateString) {
let preSelectedDateMonthEnd = this.getMonthEnd(preSelectedDateString);
if (preSelectedDate) {
let preSelectedDateMonthEnd = this.getMonthEnd(
preSelectedDate.replace("-mobile", "")
);
let weekIncludesPreSelectedMonthEnd = false;
let i = 0;
while (!weekIncludesPreSelectedMonthEnd) {
@ -402,7 +431,7 @@ export default {
},
async loadInitialData(config) {
/*
** NOTE: this _could_ be called by a parent before fully loaded, so data or computeds might not be available
** NOTE: this _could_ be called by a parent before fully loaded, so FYI component data or computeds might not be available
*/
let todayDateString;
let calendarViewDirection = "none";
@ -421,7 +450,7 @@ export default {
const currentMonthEnd = this.getMonthEnd(todayDateString);
// TODO - set up currentMonthStart if direction is PAST:
// let currentMonthStart = new Date(todayYearNum, todayMonthIndex - 1, 1);
// let currentMonthStart = new Date(todayYearNum, todayMonthIndex - 1, 1);
const initialViewWeeks = this.getInitialViewWeeks(
todayDateString,
config.initialViewRowsToShow,
@ -451,10 +480,9 @@ export default {
}
const loadInitialDataPromise = new Promise((resolve, reject) => {
const response = config.customSelectableDatesCallback(
const response = config.getSelectableDatesCallback(
initialViewStartDate,
initialViewEndDate,
store.getters.order.serviceLocation.appointmentType,
store.getters.order.serviceLocation.provider.providerNumber
);
resolve(response);
@ -480,9 +508,17 @@ export default {
const direction = config.calendarViewDirection;
const monthsAfterToLoadOffset = 6;
const monthsBeforeToLoadOffset = 36;
config.initialShopTimeSlotsResponse.days.forEach((selectableDate) => {
this.selectableDatesData.push(selectableDate);
});
config.initialShopTimeSlotsResponse.inshopTimeSlotsData.days.forEach(
(selectableDate) => {
this.selectableDatesInshop.push(selectableDate);
}
);
config.initialShopTimeSlotsResponse.mobileTimeSlotsData.days.forEach(
(selectableDate) => {
this.selectableDatesMobile.push(selectableDate);
}
);
// GENERATE MONTHS AND PUSH THEM INTO ARRAY
const months = [];
@ -534,7 +570,7 @@ export default {
}
},
async getMonthData(offset = requiredParameter(), options) {
/* options will contain:
/* options contains:
calendarViewDirection (string)
initialViewStartDateNum (number)
initialViewEndDateNum (number)
@ -543,9 +579,14 @@ export default {
hideSecondMonth (boolean),
preSelectedDate (string)
data used:
todayDate (date object)
data variables used:
this.todayString (date string)
this.currentWeekStartDateNum
this.currentWeekEndDateNum
this.todayDateNum
this.hideSomeDaysForInitialView (string)
this.selectableDatesInshop
this.selectableDatesMobile
*/
let monthNum = convertDateStringToDate(this.todayString).getMonth() + offset + 1;
@ -568,7 +609,8 @@ export default {
const preSelectedDateObj = options.preSelectedDate
? convertDateStringToDate(options.preSelectedDate)
: null;
const dates = [];
let datesInshop = [];
let datesMobile = [];
const monthEndDate = new Date(yearNum, monthNum, 0);
const monthStartDateNum =
offset === 0 && calendarViewDirection === "future"
@ -620,64 +662,74 @@ export default {
monthClass = monthClass + " last-available-month";
}
// populate dates array
for (let i = monthStartDateNum; i <= monthEndDateNum; i++) {
let dayClasses = "";
const dateString =
yearNum.toString() +
"-" +
("0" + monthNum).slice(-2) +
"-" +
("0" + i).slice(-2);
const dayIndex = convertDateStringToDate(dateString).getDay();
const dayObject = DAYS_OF_WEEK[dayIndex];
const isSelectable =
this.selectableDatesData.findIndex((date) => date.date === dateString) > -1
? true
: false;
const isPricingByDayUpchargeDay = dayObject.isPricingByDayUpchargeDay;
const displayPrice = isPricingByDayUpchargeDay
? options.pricingByDayBasePrice + options.pricingByDayUpcharge
: options.pricingByDayBasePrice;
const priceString = "$" + displayPrice;
const getDates = (selectableDates, datesArray) => {
// populate dates array
for (let i = monthStartDateNum; i <= monthEndDateNum; i++) {
let dayClasses = "";
const dateString =
yearNum.toString() +
"-" +
("0" + monthNum).slice(-2) +
"-" +
("0" + i).slice(-2);
const dayIndex = convertDateStringToDate(dateString).getDay();
const dayObject = DAYS_OF_WEEK[dayIndex];
const isAvailable =
selectableDates.findIndex((date) => date.date === dateString) > -1
? true
: false;
const isPricingByDayUpchargeDay = dayObject.isPricingByDayUpchargeDay;
const displayPrice = isPricingByDayUpchargeDay
? options.pricingByDayBasePrice + options.pricingByDayUpcharge
: options.pricingByDayBasePrice;
const priceString = "$" + displayPrice;
if (offset === 0 && i === this.todayDateNum) {
dayClasses += " current-day";
if (offset === 0 && i === this.todayDateNum) {
dayClasses += " current-day";
}
if (
offset === 0 &&
i < this.todayDateNum &&
calendarViewDirection === "future"
) {
dayClasses += " unavailable-day";
}
if (offset === 0 && i > this.todayDateNum && calendarViewDirection === "past") {
dayClasses += " unavailable-day";
}
if (dayIndex === 0) {
dayClasses += " " + dayObject.cssClass;
}
if (
this.hideSomeDaysForInitialView &&
convertDateStringToDate(initialViewEndDate).getMonth() + 1 === monthNum &&
convertDateStringToDate(initialViewEndDate).getDate() < i
) {
dayClasses += " day-hidden";
isMonthThatHidesSomeDaysForInitialView = true;
}
const dateObject = {
dateNum: i,
dayClasses: dayClasses,
inputValue: dateString,
priceString: priceString,
isAvailable: isAvailable,
isPricingByDayUpchargeDay: isPricingByDayUpchargeDay,
};
datesArray.push(dateObject);
}
if (offset === 0 && i < this.todayDateNum && calendarViewDirection === "future") {
dayClasses += " unavailable-day";
}
if (offset === 0 && i > this.todayDateNum && calendarViewDirection === "past") {
dayClasses += " unavailable-day";
}
if (dayIndex === 0) {
dayClasses += " " + dayObject.cssClass;
}
if (
this.hideSomeDaysForInitialView &&
convertDateStringToDate(initialViewEndDate).getMonth() + 1 === monthNum &&
convertDateStringToDate(initialViewEndDate).getDate() < i
) {
dayClasses += " day-hidden";
isMonthThatHidesSomeDaysForInitialView = true;
}
const dateObject = {
dateNum: i,
dayClasses: dayClasses,
inputValue: dateString,
priceString: priceString,
isSelectable: isSelectable,
isPricingByDayUpchargeDay: isPricingByDayUpchargeDay,
};
dates.push(dateObject);
}
return datesArray;
};
datesInshop = getDates(this.selectableDatesInshop, datesInshop);
datesMobile = getDates(this.selectableDatesMobile, datesMobile);
const monthToAdd = {
monthLabel: MONTHS_OF_YEAR[monthNum - 1],
monthIndex: monthNum,
monthString: MONTHS_OF_YEAR[monthNum - 1] + "-" + yearNum?.toString(),
yearNum: yearNum,
dates: dates,
datesInshop: datesInshop,
datesMobile: datesMobile,
startDateDayIndex: startDateDayIndex,
monthClass: monthClass,
isMonthThatHidesSomeDaysForInitialView: isMonthThatHidesSomeDaysForInitialView,
@ -697,9 +749,13 @@ export default {
);
// find the first day-hidden to become the next api call start date
monthStartDate = monthToShow.dates.find(({ dayClasses }) =>
dayClasses.includes("day-hidden")
);
monthStartDate = this.isMobileSelected
? monthToShow.datesMobile.find(({ dayClasses }) =>
dayClasses.includes("day-hidden")
)
: monthToShow.datesInshop.find(({ dayClasses }) =>
dayClasses.includes("day-hidden")
);
} else {
if (this.calendarViewDirection === "future") {
monthToShow = this.months.find((month) =>
@ -714,15 +770,19 @@ export default {
}
}
if (monthToShow) {
const monthToShowDates = this.isMobileSelected
? monthToShow.datesMobile
: monthToShow.datesInshop;
const monthStartDateString = monthStartDate
? monthStartDate.inputValue
: monthToShow.dates[0].inputValue;
: monthToShowDates[0].inputValue;
// make new API call with this month's start and end dates
const moreSelectableDatesData = await this.updateSelectableDates(
monthStartDateString,
monthToShow.dates[monthToShow.dates.length - 1].inputValue
monthToShowDates[monthToShowDates.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", "");
@ -735,27 +795,37 @@ export default {
}
},
async updateSelectableDates(monthStart, monthEnd) {
const moreSelectableDates = await this.customSelectableDatesCallback(
monthStart,
monthEnd,
this.$store.getters.order.serviceLocation.appointmentType,
this.$store.getters.order.serviceLocation.provider.providerNumber
);
const moreSelectableDates = await this.getMoreDatesCallback(monthStart, monthEnd);
moreSelectableDates.days.forEach((selectableDate) => {
const index = this.selectableDatesData.findIndex(
moreSelectableDates.inshopTimeSlotsData.days.forEach((selectableDate) => {
const index = this.selectableDatesInshop.findIndex(
(dateObj) => dateObj.date === selectableDate.date
);
if (index === -1) this.selectableDatesData.push(selectableDate);
if (index === -1) this.selectableDatesInshop.push(selectableDate);
this.months.forEach((month) => {
// TODO: avoid checking all calendar dates; maybe only ones between monthStart and monthEnd as defined above?
month.dates.forEach((date) => {
month.datesInshop.forEach((date) => {
if (date.inputValue === selectableDate.date) {
date["isSelectable"] = true;
date["isAvailable"] = true;
}
});
});
});
moreSelectableDates.mobileTimeSlotsData.days.forEach((selectableDate) => {
const index = this.selectableDatesMobile.findIndex(
(dateObj) => dateObj.date === selectableDate.date
);
if (index === -1) this.selectableDatesMobile.push(selectableDate);
this.months.forEach((month) => {
// TODO: avoid checking all calendar dates; maybe only ones between monthStart and monthEnd as defined above?
month.datesMobile.forEach((date) => {
if (date.inputValue === selectableDate.date) {
date["isAvailable"] = true;
}
});
});
});
return moreSelectableDates;
},
scrollToElement(elementId, duration = 800, easing = "ease-in-out") {
@ -1284,6 +1354,23 @@ export default {
}
}
}
.inshop-version {
color: limegreen !important; // TODO - THIS IS TEMPORARY CODE; TO BE REMOVED AS PART OF CASH-845
}
.mobile-version {
color: red !important; // TODO - THIS IS TEMPORARY CODE; TO BE REMOVED AS PART OF CASH-845
}
.radio-wrapper.inshop-version {
&.selectable-day label span {
color: limegreen !important; // TODO - THIS IS TEMPORARY CODE; TO BE REMOVED AS PART OF CASH-845
}
}
.radio-wrapper.mobile-version {
&.selectable-day label span {
color: red !important; // TODO - THIS IS TEMPORARY CODE; TO BE REMOVED AS PART OF CASH-845
}
}
}
}
:deep(.button-inner-wrapper) {

34
src/experiment-components/donation-block.vue
View file

@ -7,8 +7,10 @@
</div>
</div>
<div class="row-align d-flex px-4">
<div>
<img class="w-100 mt-1 me-4" :src="LogoImage" />
<div class="logo-block">
<img class="w-100" :src="LogoImage" />
<span>EIN: 26-3043727</span>
<!-- This will likely never change so hard coded -->
</div>
<div>
<p class="small subheadline mb-2" v-html="DonationSubHeadline"></p>
@ -79,7 +81,8 @@
</div>
<div class="row">
<div class="col-12">
<p class="mt-2 mb-4 mx-0 text-center caption" v-html="DonationFooterText"></p>
<p class="mt-2 mb-2 mx-0 text-center caption" v-html="DonationFooterText"></p>
<p class="mb-4 mx-0 text-center caption" v-html="DonationFooterText2"></p>
</div>
</div>
</form>
@ -121,6 +124,9 @@ export default {
DonationFooterText() {
return this.getCmsContent(this.cmsWidgetName, "FooterText");
},
DonationFooterText2() {
return this.getCmsContent(this.cmsWidgetName, "FooterText2");
},
LogoImage() {
return this.getCmsContent("DonationWidget", "Image");
},
@ -195,8 +201,26 @@ export default {
}
}
img {
width: 5rem;
.logo-block {
display: flex;
flex-direction: column;
background: white;
align-items: flex-start;
justify-content: center;
padding: 0 0.5rem;
margin-right: 1rem;
height: max-content;
img {
width: 88px;
}
span {
font-size: 0.625rem;
margin: 0 auto;
padding: 0.5rem 0;
font-family: UrbanistSemibold;
}
}
.donation-slider {

45
src/fmg-components/cart/cart.vue
View file

@ -119,7 +119,7 @@
</div>
<div v-if="donationCartItem" class="donation-amount">
<span>{{ donationCartItemName }}</span>
<span>{{ getLineItemAmount(donationCartItem.subTotal) }}</span>
<span>{{ getLineItemAmount(donationCartItem.sellingPrice) }}</span>
</div>
<div class="amount-due">
<span>{{ amountDueText }}</span>
@ -182,6 +182,7 @@ import {
getAmountDue,
getSubTotal,
getSalesTax,
getAmountDueWithDonation,
} from "@/helpers/pricing-helper.js";
// Constants
@ -211,6 +212,7 @@ export default {
isNoComp: Boolean,
isExpandedOnLoad: Boolean,
isMSRFeeApplicable: Boolean,
donationCartItem: Object,
},
data() {
return {
@ -1083,33 +1085,6 @@ export default {
donationCartItemName() {
return this.getCmsContent("DonationCartTextWidget", "Text");
},
donationCartItem() {
if (!this.lineItems || !this.lineItems.supportingItems) {
return null;
}
const donationLineItem = this.lineItems.supportingItems.find(
(item) => item.partType === partTypeStrings.DONATION
);
if (donationLineItem) {
return {
name: this.donationCartItemName,
category: cartItemCategories.SUPPORTING_ITEMS,
cartItemType: cartItemTypes.DONATION,
isDisplayed: true,
isRemovable: false,
subTotal: donationLineItem.sellingPrice,
salesTax: 0,
lineItems: [],
isCoveredByInsurance: cartItemTypesCoveredByInsurance.includes(
cartItemTypes.DONATION
),
};
}
return null;
},
removeLinkText() {
return this.getCmsContent("RemoveCartItemTextWidget", "Text");
},
@ -1156,9 +1131,15 @@ export default {
amountDue() {
if (!this.lineItems || this.lineItems.length < 1) return;
if (this.showAsPaid) return 0;
return this.isInsurance || !this.shouldHideRecalibration
? getAmountDue(this.lineItems) // calculate with recal (if on order)
: getAmountDue(this.lineItemsWithoutRecal); // calculated without recal
if (this.isInsurance || !this.shouldHideRecalibration) {
return this.donationCartItem
? getAmountDueWithDonation(this.lineItems, this.donationCartItem)
: getAmountDue(this.lineItems);
} else {
return this.donationCartItem
? getAmountDueWithDonation(this.lineItemsWithoutRecal, this.donationCartItem)
: getAmountDue(this.lineItemsWithoutRecal);
}
},
amountPaid() {
if (!this.showAsPaid) {
@ -1311,7 +1292,7 @@ export default {
.amount-due,
.amount-paid,
.donation-amount {
font-family: UrbanistSemibold, AvertaSemibold; /* Okay to remove AvertaSemibold after 2025.06.19 merge/release */
font-family: UrbanistSemibold;
color: $black;
}
.sub-total {

8
src/helpers/pricing-helper.js
View file

@ -1,6 +1,7 @@
import store from "@/store";
import { storeActions } from "@/constants/store-actions";
import baseMixin from "@/mixins/base-mixin.js";
import { deepClone } from "@/helpers/object-helper";
export function getDisplayAmountDue(lineItemsObject, includeTax = true) {
return getAmountDue(lineItemsObject, includeTax).toLocaleString("en-US", {
@ -62,6 +63,13 @@ export function getSalesTax(lineItemsObject) {
);
}
export function getAmountDueWithDonation(lineItemsObject, donationLineItem) {
// this is amount due with Donation added
const lineItemsCloneWithDonation = deepClone(lineItemsObject);
lineItemsCloneWithDonation.supportingItems.push(donationLineItem);
return getAmountDue(lineItemsCloneWithDonation, false);
}
export async function getPricingByDayPartWithPrice(pageNameToLog) {
// Get the Pricing By Day Part
const basePriceByDayPart = await baseMixin.methods.dispatchStoreActionWithLogging(

24
src/layouts/confirmation/confirmation.vue
View file

@ -55,7 +55,8 @@
:damage="damageInfo"
:availableVaps="vaps"
:allowItemRemoval="false"
v-model="lineItems"
v-model="lineItemsWithoutDonation"
:donationCartItem="donationLineItem"
:showAsPaid="isPia"
servicePackageOptionsCmsName="ServicePackageTitle"
:isInsurance="isInsurance"
@ -123,6 +124,7 @@ import experimentMixin from "@/mixins/experiment-mixin.js";
import { containsRecalParts } from "@/helpers/recal-helper.js";
import donationBlock from "@/experiment-components/donation-block.vue";
import { partNumberStrings } from "@/constants/part-number-strings";
import { partTypeStrings } from "@/constants/part-type-strings";
import analyticsMixin from "@/mixins/analytics-mixin";
export default {
@ -229,7 +231,7 @@ export default {
};
const donationItems = lineItemsFromSubmittedOrder.supportingItems?.filter(
(item) => item.partNumber === partNumberStrings.DONATION
(item) => item.partType === partTypeStrings.DONATION
);
const donationAmount = donationItems?.length > 0 ? donationItems[0].sellingPrice : 0;
@ -243,7 +245,7 @@ export default {
vm.shouldDisplayFosterLove = hasFosterLoveExperiment;
vm.donationAmount = donationAmount;
vm.showDonationSuccess = lineItemsFromSubmittedOrder.supportingItems?.some(
(item) => item.partType === partNumberStrings.DONATION
(item) => item.partType === partTypeStrings.DONATION
);
vm.pushAnalytics();
@ -490,6 +492,22 @@ export default {
donationValues() {
return [1, 3, 5];
},
lineItemsWithoutDonation() {
const lineItemsClone = deepClone(this.lineItems);
lineItemsClone.supportingItems = lineItemsClone.supportingItems?.filter(
(item) => item.partType !== partTypeStrings.DONATION
);
return lineItemsClone;
},
donationLineItem() {
if (!this.lineItems) return null;
const donationLineItems = this.lineItems.supportingItems?.filter(
(item) => item.partType === partTypeStrings.DONATION
);
let output =
donationLineItems && donationLineItems.length > 0 ? donationLineItems[0] : null;
return output;
},
},
methods: {
arePagePrerequisitesValid() {

19
src/layouts/customer-details/customer-details.vue
View file

@ -85,6 +85,7 @@ import { Form, defineRule } from "vee-validate";
import store from "@/store";
import { paymentMethods } from "@/constants/payment-method-constants";
import { flushSaveSessionQueue } from "@/helpers/heritage-integration/order-helper";
import { AppointmentTypeStrings } from "@/constants/schedule-constants";
// DEFINE VALIDATION RULES
defineRule("first-name-required", required(errorMessages.FIRST_NAME_REQUIRED));
@ -157,11 +158,21 @@ export default {
getTechNotesFromStore() {
return store.getters.order.serviceLocation.techNotes;
},
getSelectedAppointmentType() {
return store.getters.order.serviceLocation.appointmentType;
},
backButtonAction() {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_BACK,
this.pageName
);
if (this.getSelectedAppointmentType() == AppointmentTypeStrings.MOBILE) {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_BACK_WITH_MOBILE_SERVICE,
this.pageName
);
} else {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_BACK,
this.pageName
);
}
},
async forwardButtonAction() {
this.dispatchStoreAction(

198
src/layouts/mobile-details/mobile-address-questions/mobile-address-questions.spec.js Normal file
View file

@ -0,0 +1,198 @@
// Components
import mobileAddressQuestions from "@/layouts/mobile-details/mobile-address-questions/mobile-address-questions.vue";
// Supporting Files
import { mount, shallowMount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import { storeMutations } from "@/constants/store-mutations";
import store from "@/store";
describe("initial state", () => {
test("Should show all the address field", () => {
// Arrange
const { wrapper } = setupMocks({});
// Assert
const streetAddressField = wrapper.findComponent({ ref: "streetAddress" });
const cityField = wrapper.findComponent({ ref: "city" });
const stateField = wrapper.findComponent({ ref: "state" });
const zipCodeField = wrapper.findComponent({ ref: "zipCode" });
expect(streetAddressField.exists()).toBe(true);
expect(streetAddressField.isVisible()).toBe(true);
expect(cityField.exists()).toBe(true);
expect(cityField.isVisible()).toBe(true);
expect(stateField.exists()).toBe(true);
expect(stateField.isVisible()).toBe(true);
expect(zipCodeField.exists()).toBe(true);
expect(zipCodeField.isVisible()).toBe(true);
});
test("Should render mobileAddressQuestions sub-components (textbox-questions and dropdown-questions)", async () => {
// Arrange
const { wrapper } = setupMocks({});
// Act
const streetAddress = wrapper.findComponent({ ref: "streetAddress" });
const city = wrapper.findComponent({ ref: "city" });
const state = wrapper.findComponent({ ref: "state" });
const zipCode = wrapper.findComponent({ ref: "zipCode" });
// Assert
expect(streetAddress.exists()).toBe(true);
expect(city.exists()).toBe(true);
expect(state.exists()).toBe(true);
expect(zipCode.exists()).toBe(true);
});
test("Should render apartmentNumberOrBusinessName textbox-question when captureApartmentNumberOrBusinessName = true", async () => {
// Arrange
const { wrapper } = setupMocks({
props: {
modelValue: {
streetAddress: "",
apartmentNumberOrBusinessName: "",
city: "",
state: "",
zipCode: "",
},
captureApartmentNumberOrBusinessName: true,
},
});
// Act
const streetAddress = wrapper.findComponent({ ref: "streetAddress" });
const apartmentNumberOrBusinessName = wrapper.findComponent({
ref: "apartmentNumberOrBusinessName",
});
const city = wrapper.findComponent({ ref: "city" });
const state = wrapper.findComponent({ ref: "state" });
const zipCode = wrapper.findComponent({ ref: "zipCode" });
// Assert
expect(streetAddress.exists()).toBe(true);
expect(apartmentNumberOrBusinessName.exists()).toBe(true);
expect(apartmentNumberOrBusinessName.isVisible()).toBe(true);
expect(city.exists()).toBe(true);
expect(state.exists()).toBe(true);
expect(zipCode.exists()).toBe(true);
});
test("Should *not* render apartmentNumberOrBusinessName textbox-question when captureApartmentNumberOrBusinessName = false", async () => {
// Arrange
const { wrapper } = setupMocks({
props: {
modelValue: {
streetAddress: "",
apartmentNumberOrBusinessName: "",
city: "",
state: "",
zipCode: "",
},
captureApartmentNumberOrBusinessName: false,
},
});
// Act
const streetAddress = wrapper.findComponent({ ref: "streetAddress" });
const apartmentNumberOrBusinessName = wrapper.findComponent({
ref: "apartmentNumberOrBusinessName",
});
const city = wrapper.findComponent({ ref: "city" });
const state = wrapper.findComponent({ ref: "state" });
const zipCode = wrapper.findComponent({ ref: "zipCode" });
// Assert
expect(streetAddress.exists()).toBe(true);
expect(apartmentNumberOrBusinessName.exists()).toBe(true);
expect(apartmentNumberOrBusinessName.isVisible()).toBe(false);
expect(city.exists()).toBe(true);
expect(state.exists()).toBe(true);
expect(zipCode.exists()).toBe(true);
});
});
describe("happy paths", () => {
test("full street address is passed in => address fields are displayed", async () => {
// Arrange/Act
const { wrapper } = setupMocks({
props: {
modelValue: {
streetAddress: "12345 Test Road",
city: "Tests",
state: "OH",
zipCode: "12312",
},
},
});
await wrapper.vm.$nextTick();
// Assert
const cityField = wrapper.findComponent({ ref: "city" });
const stateField = wrapper.findComponent({ ref: "state" });
const zipField = wrapper.findComponent({ ref: "zipCode" });
expect(cityField.exists()).toBeTruthy();
expect(cityField.isVisible()).toBeTruthy();
expect(stateField.exists()).toBeTruthy();
expect(cityField.isVisible()).toBeTruthy();
expect(zipField.exists()).toBeTruthy();
expect(cityField.isVisible()).toBeTruthy();
});
});
function setupMocks({
mountOptions,
props,
isShallowMount = true,
querySelectorFunction,
geocoderResult = ["1234 Test Street"],
matchFound = false,
}) {
store.commit(storeMutations.RESET_STATE);
const resultingMountOptions = getMountOptions({
...mountOptions,
router: {
navigate: jest.fn(),
navigate: jest.fn(),
},
loadScript: jest.fn().mockResolvedValue(),
});
if (props) resultingMountOptions.propsData = props;
if (isShallowMount) {
resultingMountOptions.global.stubs = {
...(resultingMountOptions.global.stubs ?? {}),
textboxQuestion: {
template: `<span></span>`,
methods: {
handleChange: jest.fn(),
},
},
dropdownQuestion: {
template: `<span></span>`,
methods: {
handleChange: jest.fn(),
},
},
};
}
const wrapper = isShallowMount
? shallowMount(mobileAddressQuestions, resultingMountOptions)
: mount(mobileAddressQuestions, resultingMountOptions);
document.querySelector = jest.fn().mockImplementation((query) => {
let result = null;
if (query == ".pac-container") result = document.createElement("div");
else if (querySelectorFunction) {
result = querySelectorFunction(query);
}
return result ?? null;
});
return { wrapper };
}

170
src/layouts/mobile-details/mobile-address-questions/mobile-address-questions.vue Normal file
View file

@ -0,0 +1,170 @@
<template>
<div class="address-questions">
<div class="row mb-4" aria-live="polite">
<div class="col">
<!-- Temporarily changing id from autocomplete to streetAddress -->
<textboxQuestion
customInputId="streetAddress"
cmsWidgetName="StreetAddressQuestionWidget"
v-model="addressModel.streetAddress"
validationRules="street-address-required"
ref="streetAddress"
:labelBold="labelBold"
autocomplete="streetAddress" />
</div>
</div>
<transition name="fade" mode="out-in">
<div
class="row mb-4"
v-show="showApartmentNumberOrBusinessNameField"
aria-live="polite">
<div class="col">
<textboxQuestion
customInputId="apartmentNumberOrBusinessName"
cmsWidgetName="ApartmentNumberOrBusinessNameQuestionWidget"
v-model="addressModel.apartmentNumberOrBusinessName"
ref="apartmentNumberOrBusinessName"
:labelBold="labelBold" />
</div>
</div>
</transition>
<transition name="fade" mode="out-in">
<div class="row mb-4" aria-live="polite">
<div class="col">
<textboxQuestion
customInputId="city"
cmsWidgetName="CityQuestionWidget"
v-model="addressModel.city"
ref="city"
validationRules="city-required"
autocomplete="address-level2"
:labelBold="labelBold" />
</div>
</div>
</transition>
<transition name="fade" mode="out-in">
<div class="row mb-4" aria-live="polite">
<div class="col">
<dropdownQuestion
customDropdownId="state"
cmsWidgetName="StateQuestionWidget"
v-model="addressModel.state"
ref="state"
:options="stateOptions"
validationRules="state-required"
autocomplete="address-level1"
:labelBold="labelBold"
:isDisabled="this.isStateDisabled" />
</div>
<div class="col">
<textboxQuestion
customInputId="zipCode"
cmsWidgetName="ZipQuestionWidget"
v-model="addressModel.zipCode"
ref="zipCode"
mask="#####"
validationRules="zip-code-required|zip-code-format"
autocomplete="postal-code"
:labelBold="labelBold"
:isDisabled="this.isZipCodeDisabled" />
</div>
</div>
</transition>
</div>
</template>
<script>
import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
import dropdownQuestion from "@/digital-components/dropdown-question/dropdown-question";
import { defineRule } from "vee-validate";
import { required, regex } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
import { stateOptions } from "@/constants/state-options";
// DEFINE VALIDATION RULES
defineRule("street-address-required", required(errorMessages.STREET_ADDRESS_REQUIRED));
defineRule("city-required", required(errorMessages.CITY_REQUIRED));
defineRule("state-required", required(errorMessages.STATE_REQUIRED));
defineRule("zip-code-required", required(errorMessages.ZIP_REQUIRED));
defineRule("zip-code-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.ZIP_FORMAT));
export default {
name: "mobile-address-questions",
emits: ["update:modelValue"], // The component emits an event
props: {
modelValue: {
type: Object,
default: () => ({
streetAddress: "",
apartmentNumberOrBusinessName: "",
city: "",
state: "",
zipCode: "",
}),
},
validationRules: String,
captureApartmentNumberOrBusinessName: {
type: Boolean,
default: false,
},
preserveCityAndStateOnReset: {
type: Boolean,
default: false,
},
labelBold: {
type: Boolean,
required: false,
default: false,
},
isStateDisabled: {
type: Boolean,
required: false,
default: false,
},
isZipCodeDisabled: {
type: Boolean,
required: false,
default: false,
},
},
computed: {
stateOptions() {
return stateOptions;
},
addressModel: {
get: function () {
return this.modelValue;
},
set: function (newValue) {
this.$emit("update:modelValue", newValue);
},
},
showApartmentNumberOrBusinessNameField: {
get: function () {
return this.captureApartmentNumberOrBusinessName;
},
},
},
components: {
textboxQuestion,
dropdownQuestion,
},
};
</script>
<style lang="scss">
.address-questions {
margin-top: 0.5rem;
}
#streetAddressField {
position: relative;
.pac-container {
top: 76px !important; // Height of #streetAddressField
left: 0 !important;
}
}
</style>

139
src/layouts/mobile-details/mobile-details.spec.js Normal file
View file

@ -0,0 +1,139 @@
import mobileDetails from "@/layouts/mobile-details/mobile-details.vue";
import { mount, shallowMount } from "@vue/test-utils";
import { storeActions } from "@/constants/store-actions";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import store from "@/store";
const linkWidgetName = "linkWidgetName";
const modalWidgetName = "modalWidgetName";
const mockLinkCmsContent = {
BodyText: "Sample link body text here.",
};
const mockModalCmsContent = {
FooterText: "Sample modal footer text here.",
};
const mockMixin = {
methods: {
getCmsContent: jest.fn((widgetName, cmsFieldName) => {
if (widgetName === linkWidgetName) {
return mockLinkCmsContent[cmsFieldName];
}
if (widgetName === modalWidgetName) {
return mockModalCmsContent[cmsFieldName];
}
return null;
}),
dispatchStoreAction: jest.fn((actionName) => {
if (actionName === storeActions.SAVE_MOBILE_DETAILS) {
return true;
}
}),
},
};
beforeEach(() => {
store.getters = {
order: {
serviceLocation: {
zipCode: "43235",
zipCodeCtu: "00000",
state: "OH",
appointmentType: "Mobile",
city: "Columbus",
address: "123 Main St",
address2: "Suite 100",
isVehicleProtected: true,
},
schedule: {
date: "2023-10-10",
endTime: "14:00",
startTime: "13:00",
routeCode: "R1",
jobMaxMinutes: "60",
jobMinMinutes: "30",
},
},
payment: {
isInsurance: false,
},
};
});
describe("mobile-details.vue", () => {
test("if the continue button is clicked, navigate forward", async () => {
// Arrange
const { wrapper } = setupMocks(mobileDetails, {
mixins: [mockMixin],
attachTo: document.body,
});
wrapper.setData({
addressQuestions: {
streetAddress: "Test Street",
apartmentNumberOrBusinessName: "Test Apartment",
city: "Test City",
state: "TS",
zipCode: "12345",
},
isVehicleProtected: true,
});
// Act
await wrapper.vm.forwardButtonAction();
// Assert
expect(wrapper.vm.$router.navigateWithSaving).toHaveBeenCalled();
});
test("arePagePrerequisitesValid should be true ", async () => {
//Arrange
const { wrapper } = setupMocks(mobileDetails, {
mixins: [mockMixin],
attachTo: document.body,
});
//Act
let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
//Assert
expect(arePagePrerequisitesValid).toBe(true);
});
test("if the back button is clicked, navigate back", async () => {
// Arrange
const { wrapper } = setupMocks(mobileDetails, {
mixins: [mockMixin],
attachTo: document.body,
});
// Act
await wrapper.vm.backButtonAction();
// Assert
expect(wrapper.vm.$router.navigateWithoutSaving).toHaveBeenCalled();
});
});
function setupMocks({ mountOptions, mixins, props, isShallowMount = true }) {
const resultingMountOptions = getMountOptions({
...mountOptions,
mixins,
router: {
navigate: jest.fn(),
navigateWithSaving: jest.fn(),
navigateWithoutSaving: jest.fn(),
},
});
if (props) resultingMountOptions.propsData = props;
resultingMountOptions["attachTo"] = document.body;
const wrapper = isShallowMount
? shallowMount(mobileDetails, resultingMountOptions)
: mount(mobileDetails, resultingMountOptions);
return { wrapper };
}

168
src/layouts/mobile-details/mobile-details.vue Normal file
View file

@ -0,0 +1,168 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<loadingModal ref="loadingModal" />
<div class="container-fluid page-container-grouped-styles">
<div class="row justify-content-center">
<div class="col-md-6">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4 mt-4">
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<div class="mobile-location-questions">
<div class="address-questions-container">
<mobileAddressQuestions
ref="addressQuestions"
v-model="this.addressQuestions"
captureApartmentNumberOrBusinessName="true"
preserveCityAndStateOnReset="true"
labelBold="true"
isStateDisabled="true"
isZipCodeDisabled="true" />
<vehicleProtectedQuestion
ref="vehicleProtectedQuestion"
v-model="this.isVehicleProtected"
cmsWidgetName="VehicleProtectedQuestionWidget"
labelBold="true" />
<textBlock
cmsWidgetName="WorkspaceRequirementsWidget"
typeStyle="caption" />
<navbar
cmsWidgetName="FunnelFooterWidget"
ref="navbar"
:isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
</div>
</div>
</div>
</div>
</div>
</Form>
</template>
<script>
//Components
import textBlock from "@/digital-components/text-block/text-block";
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import navbar from "@/fmg-components/nav-bar/nav-bar";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
import { Form } from "vee-validate";
import mobileAddressQuestions from "@/layouts/mobile-details/mobile-address-questions/mobile-address-questions";
import vehicleProtectedQuestion from "@/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question";
import store from "@/store";
//Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import { AppointmentTypeStrings } from "@/constants/schedule-constants";
export default {
name: "MobileDetails",
data() {
return {
addressQuestions: {
streetAddress: this.getServiceAddressFromStore(),
apartmentNumberOrBusinessName: this.getServiceAddress2FromStore(),
city: this.getServiceCityFromStore(),
state: this.getServiceStateFromStore(),
zipCode: this.getServiceZipCodeFromStore(),
},
isVehicleProtected: this.getIsVehicleProtectedFromStore(),
};
},
async beforeRouteEnter(to, from, next) {
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.name);
// Settle promises and get results
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
});
},
methods: {
arePagePrerequisitesValid() {
const serviceLocation = store.getters.order.serviceLocation;
const serviceLocationPreReqs =
serviceLocation.zipCode &&
serviceLocation.zipCodeCtu &&
serviceLocation.appointmentType &&
serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE;
// Schedule
const schedule = store.getters.order.schedule;
const scheduleReqs = !!(
schedule.date &&
schedule.startTime &&
schedule.endTime &&
schedule.jobMaxMinutes &&
schedule.jobMinMinutes
);
const preReqResult = serviceLocationPreReqs && scheduleReqs;
return preReqResult;
},
getServiceAddressFromStore() {
return store.getters.order.serviceLocation.address;
},
getServiceAddress2FromStore() {
return store.getters.order.serviceLocation.address2;
},
getServiceCityFromStore() {
return store.getters.order.serviceLocation.city;
},
getServiceStateFromStore() {
return store.getters.order.serviceLocation.state;
},
getServiceZipCodeFromStore() {
return store.getters.order.serviceLocation.zipCode;
},
getIsVehicleProtectedFromStore() {
return store.getters.order.serviceLocation.isVehicleProtected;
},
async forwardButtonAction() {
await this.dispatchStoreAction(
this.storeActions.SAVE_MOBILE_DETAILS,
{
address: this.addressQuestions.streetAddress,
address2: this.addressQuestions.apartmentNumberOrBusinessName,
city: this.addressQuestions.city,
isVehicleProtected: this.isVehicleProtected,
},
false
);
this.$router.navigateWithSaving(
this.navigationScenarios.CLICKED_FORWARD,
this.pageName
);
},
backButtonAction() {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_BACK,
this.pageName
);
},
},
computed: {
headerText() {
return this.getCmsContent("MobileLocationModalWidget", "HeaderText");
},
},
components: {
mobileAddressQuestions,
vehicleProtectedQuestion,
textBlock,
funnelHeader,
navbar,
funnelSubHeader,
Form,
loadingModal,
},
};
</script>

132
src/layouts/schedule/schedule.spec.js
View file

@ -12,7 +12,7 @@ import baseMixin from "../../mixins/base-mixin";
jest.mock("@/mixins/base-mixin.js", () => ({
methods: {
dispatchStoreAction: jest.fn().mockImplementation((storeAction) => {
if (storeAction === "getShopTimeSlots") {
if (storeAction === "getShopTimeSlots" || storeAction === "getMobileTimeSlots") {
return {
data: {
estimatedServiceMinutesMinimum: 90,
@ -71,7 +71,7 @@ jest.mock("@/mixins/base-mixin.js", () => ({
}
}),
dispatchStoreActionWithLogging: jest.fn().mockImplementation((storeAction) => {
if (storeAction === "getShopTimeSlots") {
if (storeAction === "getShopTimeSlots" || storeAction === "getMobileTimeSlots") {
return {
data: {
estimatedServiceMinutesMinimum: 90,
@ -243,48 +243,73 @@ describe("schedule.vue...", () => {
expect(arePagePrerequisitesValid).toBe(false);
});
test("should return newShopTimeSlots when getAvailableDatesMethod is called", async () => {
test("should return timeslots when getMoreScheduleData is called", async () => {
// Arrange
const { wrapper } = setupMocks({});
wrapper.vm.selectableDatesData = {
wrapper.vm.selectableDatesInshop = {
days: [],
};
wrapper.vm.selectableDatesMobile = {
days: [],
};
// Act
const newShopTimeSlots = await wrapper.vm.getAvailableDatesMethod(
const newShopTimeSlots = await wrapper.vm.getMoreScheduleData(
"2023-01-01",
"2023-01-31"
);
// Assert
expect(newShopTimeSlots).toStrictEqual({
days: [
{
date: "2023-12-01",
timeSlots: [
{
endTime: "08:00",
id: "06747-01820-S-B*20424*7 AM",
offerPremium: false,
startTime: "07:00",
},
],
},
],
estimatedServiceMinutesMinimum: 90,
estimatedServiceMinutesMaximum: 120,
inshopTimeSlotsData: {
days: [
{
date: "2023-12-01",
timeSlots: [
{
endTime: "08:00",
id: "06747-01820-S-B*20424*7 AM",
offerPremium: false,
startTime: "07:00",
},
],
},
],
estimatedServiceMinutesMinimum: 90,
estimatedServiceMinutesMaximum: 120,
},
mobileTimeSlotsData: {
days: [
{
date: "2023-12-01",
timeSlots: [
{
endTime: "08:00",
id: "06747-01820-S-B*20424*7 AM",
offerPremium: false,
startTime: "07:00",
},
],
},
],
estimatedServiceMinutesMinimum: 90,
estimatedServiceMinutesMaximum: 120,
},
});
});
test("should call API service in day ranges of 34 or less when getAvailableDatesMethod is called with large date ranges", async () => {
test("should call API service in day ranges of 34 or less when getMoreScheduleData is called with large date ranges", async () => {
// Arrange
const { wrapper } = setupMocks({});
wrapper.vm.selectableDatesData = {
wrapper.vm.selectableDatesInshop = {
days: [],
};
wrapper.vm.selectableDatesMobile = {
days: [],
};
// Act
await wrapper.vm.getAvailableDates.call(
await wrapper.vm.getMoreScheduleData.call(
wrapper.vm,
"2023-01-01",
"2023-03-31",
@ -293,7 +318,7 @@ describe("schedule.vue...", () => {
);
// Assert
expect(baseMixin.methods.dispatchStoreActionWithLogging).toHaveBeenCalledTimes(3);
expect(baseMixin.methods.dispatchStoreActionWithLogging).toHaveBeenCalledTimes(6);
expect(baseMixin.methods.dispatchStoreActionWithLogging).toHaveBeenCalledWith(
"getShopTimeSlots",
expect.anything(),
@ -306,7 +331,7 @@ describe("schedule.vue...", () => {
test("should call next() and call all functions within next", async () => {
// Arrange
const { wrapper } = setupMocks({});
wrapper.vm.selectableDatesData = {
wrapper.vm.selectableDatesInshop = {
days: [],
};
wrapper.vm.updateFooterButtonText = jest.fn();
@ -332,7 +357,7 @@ describe("schedule.vue...", () => {
})
);
expect(wrapper.vm.$refs.locationAlerts.initializeComponent).toHaveBeenCalled();
expect(wrapper.vm.selectableDatesData).toStrictEqual(
expect(wrapper.vm.selectableDatesInshop).toStrictEqual(
expect.objectContaining({
days: expect.any(Array),
estimatedServiceMinutesMaximum: expect.any(Number),
@ -353,7 +378,7 @@ describe("schedule.vue...", () => {
test("timeSlotsForSelectedDate should return timeslots if selected date is available", () => {
// Arrange
const { wrapper } = setupMocks({});
wrapper.vm.selectableDatesData = {
wrapper.vm.selectableDatesInshop = {
days: [
{
date: "2022-11-11",
@ -392,7 +417,7 @@ describe("schedule.vue...", () => {
test("timeSlotsForSelectedDate should be null if no date has been selected", () => {
// Arrange
const { wrapper } = setupMocks({});
wrapper.vm.selectableDatesData = {
wrapper.vm.selectableDatesInshop = {
days: [
{
date: "2022-11-11",
@ -430,7 +455,7 @@ describe("schedule.vue...", () => {
test("getServiceZipCtuCodeFromStore should return zipCodeCtu", () => {
// Arrange
const { wrapper } = setupMocks({});
wrapper.vm.selectableDatesData = {
wrapper.vm.selectableDatesInshop = {
days: [],
};
@ -444,7 +469,7 @@ describe("schedule.vue...", () => {
test("getDisplayTextForMilitaryTime should return the correctly formatted string", () => {
// Arrange
const { wrapper } = setupMocks({});
wrapper.vm.selectableDatesData = {
wrapper.vm.selectableDatesInshop = {
days: [],
};
const timeInput1 = "15:00";
@ -466,7 +491,7 @@ describe("schedule.vue...", () => {
test("Clicking back should fire correct navigation", () => {
// Arrange
const { wrapper } = setupMocks({});
wrapper.vm.selectableDatesData = {
wrapper.vm.selectableDatesInshop = {
days: [],
};
wrapper.vm.$router.navigateWithoutSaving = jest.fn();
@ -501,51 +526,6 @@ describe("schedule.vue...", () => {
expect(wrapper.vm.$router.navigateWithSaving).toHaveBeenCalled();
});
test("for mobile appts, updateSupportingItems should call store action to save supporting items", async () => {
// Arrange
store.getters.order.serviceLocation.appointmentType = "Mobile";
store.getters.lineItems.supportingItems = [
{
partNumber: "EARLY BIRD",
description: null,
partType: "EARLY BIRD",
laborAmount: 0,
sellingPrice: 0,
kitPrice: 0,
},
];
const { wrapper } = setupMocks({});
wrapper.vm.dispatchStoreAction = jest.fn(() => {
return {
data: [],
};
});
wrapper.vm.mobilePremiumAppointmentFee = 14.99;
wrapper.setData({
selectedTimeSlot: {
date: "2019-01-01",
startTime: "09:00",
endTime: "10:00",
routeCode: null,
isPremiumAppointment: true,
},
});
// Act
await wrapper.vm.updateSupportingItems();
// Assert
expect(wrapper.vm.dispatchStoreAction).toBeCalledWith(
"saveSupportingItemsSuppressingStateResetting",
expect.arrayContaining([
expect.objectContaining({
partType: "EARLY BIRD",
}),
]),
expect.anything()
);
});
test("for Inshop appts, updateSupportingItems should call store action to save supporting items WITHOUT the EARLY BIRD supporting item", async () => {
// Arrange
store.getters.order.serviceLocation.appointmentType = "Inshop";

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

@ -23,8 +23,9 @@
selectableDatesSetting="custom"
ref="datePicker"
v-model="selectedDate"
:isMobileSelected="isMobileSelected"
class="text-link-small"
:customSelectableDatesCallback="getAvailableDatesMethod"
:getMoreDatesCallback="getMoreScheduleData"
validationRules="date-required"
@date-clicked="handleDateClicked"
:pricingByDayBasePrice="pricingByDayBasePrice"
@ -34,12 +35,8 @@
:timeSlotsForSelectedDate="timeSlotsForSelectedDate"
:appointmentType="appointmentType"
:premiumAppointmentFee="mobilePremiumAppointmentFee"
:estimatedServiceMinutesMinimum="
selectableDatesData.estimatedServiceMinutesMinimum
"
:estimatedServiceMinutesMaximum="
selectableDatesData.estimatedServiceMinutesMaximum
"
:estimatedServiceMinutesMinimum="getServiceMinutesMin"
:estimatedServiceMinutesMaximum="getServiceMinutesMax"
@TimeSlotSelected="updateTimeSlot"
:displayWaitList="displayWaitList"
@waitListRequested="handleWaitListRequested" />
@ -67,8 +64,6 @@ import locationAlerts from "@/layouts/schedule/location-alerts/location-alerts";
import textBlock from "@/digital-components/text-block/text-block";
// Supporting files
import { queryStrings } from "@/constants/query-strings";
import { getQuerystringParameter } from "@/helpers/querystring-helper";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import baseMixin from "@/mixins/base-mixin.js";
import { storeActions } from "@/constants/store-actions";
@ -101,24 +96,19 @@ defineRule("date-required", required(errorMessages.DATE_REQUIRED));
// Define constants
const TIME_SLOTS_CALL_DAYS_LIMIT = 34; // needs to be 34 for API limits (35 does not consistently work)
const NUMBER_OF_CALENDAR_ROWS_TO_SHOW_FOR_INITIAL_VIEW = 2;
const getAvailableDates = async (
startDateString,
endDateString,
appointmentType,
providerNumber
) => {
const getScheduleApiResponse = async (startDateString, endDateString, providerNumber) => {
const apiEndDateLimit = sumDateString(startDateString, TIME_SLOTS_CALL_DAYS_LIMIT);
const difference = calcDaysBetweenDates(startDateString, endDateString);
const apiCallsCount = Math.ceil(difference / TIME_SLOTS_CALL_DAYS_LIMIT);
const storeActionConfigs = [];
const timeSlotsData = {};
timeSlotsData.days = [];
let apiStartDate = startDateString;
let apiEndDate = endDateString;
for (let i = 1; i <= apiCallsCount; i++) {
let storeActionConfig;
let storeActionConfigInshop;
let storeActionConfigMobile;
if (i > 1) {
apiStartDate = sumDateString(apiEndDate, 1);
@ -133,29 +123,32 @@ const getAvailableDates = async (
}
}
if (appointmentType === AppointmentTypeStrings.MOBILE) {
storeActionConfig = {
storeAction: storeActions.GET_MOBILE_TIME_SLOTS,
payload: {
startDate: apiStartDate,
endDate: apiEndDate,
},
};
} else {
storeActionConfig = {
storeAction: storeActions.GET_SHOP_TIME_SLOTS,
payload: {
startDate: apiStartDate,
endDate: apiEndDate,
shopAppointmentType: appointmentType,
providerNumber: providerNumber,
},
};
storeActionConfigMobile = {
storeAction: storeActions.GET_MOBILE_TIME_SLOTS,
payload: {
startDate: apiStartDate,
endDate: apiEndDate,
},
};
storeActionConfigInshop = {
storeAction: storeActions.GET_SHOP_TIME_SLOTS,
payload: {
startDate: apiStartDate,
endDate: apiEndDate,
shopAppointmentType: "InshopOrDropoff",
providerNumber: providerNumber,
},
};
if (apiStartDate < apiEndDate) {
storeActionConfigs.push(storeActionConfigInshop);
storeActionConfigs.push(storeActionConfigMobile);
}
if (apiStartDate < apiEndDate) storeActionConfigs.push(storeActionConfig);
}
const timeSlotsResponsesData = {
const inshopTimeSlotsData = {
days: [],
};
const mobileTimeSlotsData = {
days: [],
};
@ -167,39 +160,71 @@ const getAvailableDates = async (
const makeParallelCalls = async () => {
await Promise.all(
storeActionConfigs.map(async (storeAction) => {
const timeSlotsResponse = await baseMixin.methods.dispatchStoreActionWithLogging(
storeAction.storeAction,
storeAction.payload,
"schedule",
false
);
timeSlotsResponsesData.estimatedServiceMinutesMinimum =
timeSlotsResponse.data.estimatedServiceMinutesMinimum;
timeSlotsResponsesData.estimatedServiceMinutesMaximum =
timeSlotsResponse.data.estimatedServiceMinutesMaximum;
timeSlotsResponsesData.days = [
...timeSlotsResponsesData.days,
...timeSlotsResponse.data.days,
];
storeActionConfigs.map(async (storeActionConfig) => {
if (storeActionConfig.storeAction.indexOf("Mobile") > -1) {
const mobileTimeSlotsResponse =
await baseMixin.methods.dispatchStoreActionWithLogging(
storeActionConfig.storeAction,
storeActionConfig.payload,
"schedule",
false
);
mobileTimeSlotsData.estimatedServiceMinutesMinimum =
mobileTimeSlotsResponse.data.estimatedServiceMinutesMinimum;
mobileTimeSlotsData.estimatedServiceMinutesMaximum =
mobileTimeSlotsResponse.data.estimatedServiceMinutesMaximum;
mobileTimeSlotsData.days = [
...mobileTimeSlotsData.days,
...mobileTimeSlotsResponse.data.days,
];
} else {
const inshopTimeSlotsResponse =
await baseMixin.methods.dispatchStoreActionWithLogging(
storeActionConfig.storeAction,
storeActionConfig.payload,
"schedule",
false
);
inshopTimeSlotsData.estimatedServiceMinutesMinimum =
inshopTimeSlotsResponse.data.estimatedServiceMinutesMinimum;
inshopTimeSlotsData.estimatedServiceMinutesMaximum =
inshopTimeSlotsResponse.data.estimatedServiceMinutesMaximum;
inshopTimeSlotsData.days = [
...inshopTimeSlotsData.days,
...inshopTimeSlotsResponse.data.days,
];
}
})
);
};
return makeParallelCalls().then(() => {
// sort days chronologically
timeSlotsResponsesData.days.sort(compareDayStrings);
return timeSlotsResponsesData;
inshopTimeSlotsData.days.sort(compareDayStrings);
mobileTimeSlotsData.days.sort(compareDayStrings);
return {
inshopTimeSlotsData: inshopTimeSlotsData,
mobileTimeSlotsData: mobileTimeSlotsData,
};
});
};
const returnFirstDate = (dates) => {
if (dates.days?.length > 0) {
return dates.days[0].date;
} else {
return null;
}
};
export default {
name: "schedule",
data() {
return {
selectedDate: this.getSelectedDate(),
selectedTimeSlotInfo: this.getSelectedTimeSlotInfo(),
selectableDatesData: [],
mobilePremiumAppointmentFee: null,
waitListRequested: null,
displayWaitList: null,
@ -209,6 +234,9 @@ export default {
pricingByDayBasePrice: null,
pricingByDayUpcharge: null,
showPricingByDay: null,
selectableDatesInshop: [],
selectableDatesMobile: [],
isMobileSelected: false,
};
},
async beforeRouteEnter(to, from, next) {
@ -230,7 +258,6 @@ export default {
isRecalibrationOnOrder && shouldHideRecalibration
? getItemsWithoutRecalParts(lineItems.glassParts)
: (lineItems.glassParts ?? []);
const supportingItemsFromStore = lineItems?.supportingItems;
const supportingItemsWithoutFees = baseMixin.methods.filterOutCertainPartTypesOrNumbers(
lineItems.supportingItems,
{
@ -249,10 +276,14 @@ export default {
const priceString = getAmountDue(lineItemsToBePriced, false); // pass the IncludeTax param as false
const priceStringIntegerRoundedDown = priceString?.split(".")[0]; // same method used as getDisplayPrice() in service-package-radio used on /quote
const pricingByDayBasePrice = parseInt(priceStringIntegerRoundedDown);
const isMobileSelected =
store.getters.order.serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE;
let includePricingByDayUpcharge = false;
// Check to see if date should be pre-selected
let preSelectedSlot = await store.getters.order.schedule;
let preSelectedDate = preSelectedSlot ? preSelectedSlot.date : null;
if (isMobileSelected && preSelectedDate) preSelectedDate += "-mobile";
if (!preSelectedSlot.date || preSelectedSlot?.date?.length < 1) {
preSelectedSlot = null;
} else {
@ -279,9 +310,9 @@ export default {
const datePickerInitialDataPromise = await datePicker.methods.loadInitialData({
// setup config options for date-picker
selectableDatesSetting: "custom",
initialViewRowsToShow: 2,
customSelectableDatesCallback: getAvailableDates,
preSelectedDate: preSelectedSlot ? preSelectedSlot.date : preSelectedSlot,
initialViewRowsToShow: NUMBER_OF_CALENDAR_ROWS_TO_SHOW_FOR_INITIAL_VIEW,
getSelectableDatesCallback: getScheduleApiResponse,
preSelectedDate: preSelectedDate,
});
// Get pricingByDayUpcharge needed for Pricing By Day
@ -351,7 +382,10 @@ export default {
vm.setCmsContent(resultMap.cmsContent);
vm.$refs.datePicker.initializeComponent(datePickerInitialData);
vm.$refs.locationAlerts.initializeComponent(resultMap.alertReasons);
vm.selectableDatesData = datePickerInitialData.initialShopTimeSlotsResponse;
vm.selectableDatesInshop =
datePickerInitialData.initialShopTimeSlotsResponse.inshopTimeSlotsData;
vm.selectableDatesMobile =
datePickerInitialData.initialShopTimeSlotsResponse.mobileTimeSlotsData;
vm.mobilePremiumAppointmentFee = resultMap.premiumFeeWithPrice
? resultMap.premiumFeeWithPrice[0]
: null;
@ -363,21 +397,33 @@ export default {
vm.pricingByDayBasePrice = pricingByDayBasePrice;
vm.pricingByDayUpcharge = pricingByDayUpcharge;
vm.showPricingByDay = showPricingByDay;
vm.isMobileSelected = isMobileSelected;
});
},
mounted() {
this.$nextTick(() => {
const selectableDatesData = this.selectableDatesData;
// if no date selected on load
if (!this.selectedDate) {
if (selectableDatesData?.days?.length > 0) {
this.selectedDate = selectableDatesData.days[0].date;
// if no date is preselected on load, then select the first available
if (this.isMobileSelected) {
this.selectedDate = returnFirstDate(this.selectableDatesMobile);
} else {
this.selectedDate = returnFirstDate(this.selectableDatesInshop);
}
// if there is still no selected date, then load more and try again
if (!this.selectedDate) {
setTimeout(() => {
this.$refs.datePicker.showAnotherMonth().then((moreSelectableDatesData) => {
this.selectableDatesData = moreSelectableDatesData;
if (selectableDatesData?.days?.length > 0) {
this.selectedDate = selectableDatesData.days[0].date;
this.$refs.datePicker.showAnotherMonth().then((moreSelectableDates) => {
// update global
this.selectableDatesInshop.days =
moreSelectableDates.inshopTimeSlotsData.days;
this.selectableDatesMobile.days =
moreSelectableDates.mobileTimeSlotsData.days;
if (this.isMobileSelected) {
this.selectedDate = returnFirstDate(this.selectableDatesMobile);
} else {
this.selectedDate = returnFirstDate(this.selectableDatesInshop);
}
this.setDisplayWaitList();
@ -396,27 +442,46 @@ export default {
return this.splitCopyOnCMSPlaceHolder(this.ChangeShopLinkText);
},
appointmentType() {
return this.$store.getters.order.serviceLocation.appointmentType;
// TODO - THIS HAS TO BE CHANGED. APPOINTMENT TYPE CAN NOW CHANGE ON THE FLY, NOT FROM STORE ANYMORE.
// return this.$store.getters.order.serviceLocation.appointmentType;
if (this.isMobileSelected) {
return "Mobile";
} else {
return "Inshop";
}
},
getServiceMinutesMin() {
return this.isMobileSelected
? this.selectableDatesMobile.estimatedServiceMinutesMinimum
: this.selectableDatesInshop.estimatedServiceMinutesMinimum;
},
getServiceMinutesMax() {
return this.isMobileSelected
? this.selectableDatesMobile.estimatedServiceMinutesMaximum
: this.selectableDatesInshop.estimatedServiceMinutesMaximum;
},
timeSlotsForSelectedDate() {
if (!this.selectedDate) return null;
const selectedDate = this.selectedDate;
return this.selectableDatesData.days?.find(
(selectableDate) => selectableDate.date === this.selectedDate
);
if (this.isMobileSelected) {
const selectedDateString = selectedDate.replace("-mobile", "");
return this.selectableDatesMobile.days?.find(
(selectableDate) => selectableDate.date === selectedDateString
);
} else {
return this.selectableDatesInshop.days?.find(
(selectableDate) => selectableDate.date === this.selectedDate
);
}
},
},
methods: {
splitCopyOnCMSPlaceHolder,
arePagePrerequisitesValid() {
const serviceLocation = store.getters.order.serviceLocation;
const serviceLocation = store.getters.order.serviceLocation; // TODO - MAY NEED TO REMOVE THIS AS A PREREQ
const serviceLocationPreReqs =
serviceLocation.zipCode &&
serviceLocation.zipCodeCtu &&
serviceLocation.appointmentType &&
(serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE ||
serviceLocation.provider.providerNumber);
const serviceLocationPreReqs = serviceLocation.zipCode && serviceLocation.zipCodeCtu; // TODO - MAY NEED TO ADD IN SERVICE LOCATION PREREQS HERE TOO
const paymentInfo = store.getters.payment.isInsurance !== null;
@ -441,26 +506,38 @@ export default {
}
return preReqResult;
},
async getAvailableDatesMethod(startDate, endDate) {
const newShopTimeSlots = await getAvailableDates(
async getMoreScheduleData(startDate, endDate) {
// called only when "View more dates" is clicked; not on initial page load
const moreShopTimeSlots = await getScheduleApiResponse(
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
this.selectableDatesInshop.days = this.selectableDatesInshop.days.concat(
moreShopTimeSlots.inshopTimeSlotsData.days
);
return newShopTimeSlots;
this.selectableDatesMobile.days = this.selectableDatesMobile.days.concat(
moreShopTimeSlots.mobileTimeSlotsData.days
);
return moreShopTimeSlots;
},
getAvailableDates,
getScheduleApiResponse,
getServiceZipCtuCodeFromStore() {
return store.getters.order.serviceLocation.zipCodeCtu;
},
getSelectedDate() {
return store.getters.order.schedule.date;
let isMobileSelected = this.isMobileSelected;
if (isMobileSelected === undefined) {
isMobileSelected =
store.getters.order.serviceLocation.appointmentType ===
AppointmentTypeStrings.MOBILE;
}
let storedDate = store.getters.order.schedule.date;
if (isMobileSelected) storedDate += "-mobile";
return storedDate;
},
getSelectedTimeSlotInfo() {
const supportingItems = this.getSupportingItems();
@ -513,8 +590,7 @@ export default {
},
convertSelectedDateToShortMonthAndDay(selectedDate) {
// This conversion ensures we don't get get GMT induced date changes
const dateObject = convertDateStringToDate(selectedDate);
// Ex: April 25
const dateObject = convertDateStringToDate(selectedDate.replace("-mobile", ""));
return dateObject.toLocaleDateString("en-us", { month: "short", day: "numeric" });
},
getDisplayTextForMilitaryTime(militaryTimeInput, shouldTrimMinutesIfEmpty = false) {
@ -523,10 +599,7 @@ export default {
const minutes = militaryTimeInput.split(":")[1];
const meridianNotation = hours > 11 ? "PM" : "AM";
if (hours > 12) {
hours -= 12;
}
if (hours > 12) hours -= 12;
if (shouldTrimMinutesIfEmpty && minutes === "00") {
return `${hours} ${meridianNotation}`;
} else {
@ -540,6 +613,7 @@ export default {
);
},
forwardButtonAction() {
// TODO - WILL NEED TO SAVE THE APPOINTMENT TYPE ALSO (AND ANYTHING ELSE THAT SERVICE-LOCATION DID TOO)
this.updateSupportingItems();
if (this.displayWaitList) {
@ -555,7 +629,9 @@ export default {
gaLabel = `${status}_${type}`;
const currentDate = new Date();
const dateString = this.selectableDatesData.days[0].date;
const dateString = this.isMobileSelected
? this.selectableDatesMobile.days[0].date
: this.selectableDatesInshop.days[0].date;
const [year, month, day] = dateString.split("-").map(Number);
const appointmentDate = new Date(year, month - 1, day);
const timeDifference = appointmentDate - currentDate;
@ -572,11 +648,14 @@ export default {
store.getters.order.serviceLocation.zipCodeCtu;
this.pushEventToGA("waitlist", "add_to_waitlist_check_box_status", gaLabel, true);
}
if (this.selectedTimeSlotInfo.timeSlot.jobMinMinutes == null) {
this.selectedTimeSlotInfo.timeSlot.jobMinMinutes =
this.selectableDatesData?.estimatedServiceMinutesMinimum?.toString();
this.selectedTimeSlotInfo.timeSlot.jobMaxMinutes =
this.selectableDatesData?.estimatedServiceMinutesMaximum?.toString();
this.selectedTimeSlotInfo.timeSlot.jobMinMinutes = this.isMobileSelected
? this.selectableDatesMobile.estimatedServiceMinutesMinimum?.toString()
: this.selectableDatesInshop.estimatedServiceMinutesMinimum?.toString();
this.selectedTimeSlotInfo.timeSlot.jobMaxMinutes = this.isMobileSelected
? this.selectableDatesMobile.estimatedServiceMinutesMaximum?.toString()
: this.selectableDatesInshop.estimatedServiceMinutesMaximum?.toString();
}
this.dispatchStoreAction(
@ -604,9 +683,12 @@ export default {
experimentSettings.DISPLAY_WAITLIST,
"true"
) &&
this.selectableDatesData.days[0]
this.selectableDatesInshop.days[0] && // TODO - ASK BUSINESS... WHAT LOGIC SHOULD WE USE HERE FOR WHEN TO DISPLAY THE WAIT LIST?
this.selectableDatesMobile.days[0]
) {
const dateString = this.selectableDatesData.days[0].date;
const dateString = this.isMobileSelected
? this.selectableDatesMobile.days[0].date
: this.selectableDatesInshop.days[0].date;
const [year, month, day] = dateString.split("-").map(Number);
const targetDate = new Date(year, month - 1, day);
const currentDate = new Date();

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

@ -314,57 +314,6 @@ describe("service-location.vue", () => {
expect(wrapper.vm.serviceZipCodeQuestion).toStrictEqual(newServiceZipCodeQuestion);
});
test("resets mobile location when service zip code is updated", () => {
// Arrange
const { wrapper } = setupMocks({});
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",
zipCodeCtu: "01526",
};
const mobileLocationQuestions = {
addressQuestions: {
streetAddress: "5555 Sulgrave Dr",
apartmentNumberOrBusinessName: "Apt 1",
city: "New Albany",
state: "OH",
zipCode: "43054",
},
isVehicleProtected: true,
};
wrapper.vm.mobileLocationQuestions = mobileLocationQuestions;
const newMobileLocationQuestions = {
addressQuestions: {
streetAddress: "",
apartmentNumberOrBusinessName: "",
city: "",
state: "IL",
zipCode: "61606",
},
isVehicleProtected: null,
isMobileSelected: false,
};
// Act
serviceZipCodeComponent.vm.$emit("update:modelValue", newServiceZipCodeQuestion);
// Assert
expect(wrapper.vm.mobileLocationQuestions).toStrictEqual(newMobileLocationQuestions);
});
test("resets appointment type selection when service zip code is updated by service zip modal", () => {
// Arrange
const { wrapper } = setupMocks({});
@ -424,190 +373,6 @@ describe("service-location.vue", () => {
});
});
describe("updating mobile location", () => {
test("updates the page model after providing the mobile location", async () => {
// Arrange
const { wrapper } = setupMocks({});
await wrapper.setData({
shopProviderData: {
mobileProviderNumber: "001820",
},
selectedAppointmentType: "Mobile",
providerData: { mobileProviderNumber: "01820" },
isGlassServiceableMobile: true,
});
const mobileLocationQuestionsComponent = wrapper.findComponent({
ref: "mobileLocationQuestions",
});
mobileLocationQuestionsComponent.resetComponent = jest.fn();
const serviceZipCodeComponent = wrapper.findComponent({
ref: "serviceZipCodeQuestion",
});
serviceZipCodeComponent.resetMobileFeePart = jest.fn();
wrapper.vm.forwardButtonAction = jest.fn();
const mobileLocationQuestions = {
addressQuestions: {
streetAddress: "",
apartmentNumberOrBusinessName: "",
city: "",
state: "",
zipCode: "",
},
isVehicleProtected: null,
};
wrapper.vm.mobileLocationQuestions = mobileLocationQuestions;
const newMobileLocationQuestions = {
addressQuestions: {
streetAddress: "5555 Sulgrave Dr",
apartmentNumberOrBusinessName: "Apt 1",
city: "New Albany",
state: "OH",
zipCode: "43054",
},
isVehicleProtected: true,
isMobileSelected: true,
};
// Act
// Trigger the event
await mobileLocationQuestionsComponent.vm.$emit(
"setMobileLocation",
newMobileLocationQuestions
);
await wrapper.vm.$nextTick(); // Wait for DOM updates
// Assert
expect(wrapper.vm.mobileLocationQuestions).toStrictEqual(newMobileLocationQuestions);
});
test("resets service zip code when mobile location is updated", async () => {
// Arrange
const { wrapper } = setupMocks({});
await wrapper.setData({
shopProviderData: {
mobileProviderNumber: "001820",
},
selectedAppointmentType: "Mobile",
providerData: { mobileProviderNumber: "01820" },
isGlassServiceableMobile: true,
});
const mobileLocationQuestionsComponent = wrapper.findComponent({
ref: "mobileLocationQuestions",
});
mobileLocationQuestionsComponent.resetComponent = jest.fn();
const serviceZipCodeComponent = wrapper.findComponent({
ref: "serviceZipCodeQuestion",
});
serviceZipCodeComponent.resetMobileFeePart = jest.fn();
wrapper.vm.forwardButtonAction = jest.fn();
const mobileLocationQuestions = {
addressQuestions: {
streetAddress: "",
apartmentNumberOrBusinessName: "",
city: "",
state: "",
zipCode: "",
},
isVehicleProtected: null,
isMobileSelectedAndModalClosed: false,
mobileFeePart: null,
};
wrapper.vm.mobileLocationQuestions = mobileLocationQuestions;
const newMobileLocationQuestions = {
addressQuestions: {
streetAddress: "5555 Rustic Dr",
apartmentNumberOrBusinessName: "Apt 1",
city: "Westerville",
state: "OH",
zipCode: "43081",
},
isVehicleProtected: true,
isMobileSelectedAndModalClosed: true,
mobileFeePart: null,
};
wrapper.vm.serviceZipCodeQuestion = {
zipCode: "61606",
state: "IL",
zipCodeCtu: "01526",
};
const newServiceZipCodeInfo = {
state: "OH",
zipCode: "43081",
zipCodeCtu: "01526",
};
wrapper.vm.closeModalAction = jest.fn();
// Act
// Trigger the event
await mobileLocationQuestionsComponent.vm.$emit(
"setMobileLocation",
newMobileLocationQuestions
);
await wrapper.vm.$nextTick(); // Wait for DOM updates
// Assert
expect(wrapper.vm.serviceZipCodeQuestion).toStrictEqual(newServiceZipCodeInfo);
});
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({});
await wrapper.setData({
shopProviderData: {
mobileProviderNumber: "001820",
},
selectedAppointmentType: "Mobile",
providerData: { mobileProviderNumber: "01820" },
});
const mobileLocationQuestionsComponent = wrapper.findComponent({
ref: "mobileLocationQuestions",
});
mobileLocationQuestionsComponent.resetComponent = jest.fn();
wrapper.vm.forwardButtonAction = jest.fn();
wrapper.vm.isServiceableMobile = true;
const serviceZipCodeComponent = wrapper.findComponent({
ref: "serviceZipCodeQuestion",
});
serviceZipCodeComponent.resetMobileFeePart = jest.fn();
const mobileLocationQuestions = {
addressQuestions: {
streetAddress: "555 Some Street",
apartmentNumberOrBusinessName: "",
city: "Westerville",
state: "OH",
zipCode: "43081",
},
isVehicleProtected: "YesAnswer",
isMobileSelectedAndModalClosed: true,
};
wrapper.vm.closeModalAction = jest.fn();
// Act
mobileLocationQuestionsComponent.vm.$emit("setMobileLocation", mobileLocationQuestions);
// Assert
expect(wrapper.vm.selectedAppointmentType).toStrictEqual("Mobile");
});
});
describe("serviceability logic", () => {
describe("should be logical AND when recalibration is defined.", () => {
test("T & T => T", async () => {
@ -1434,8 +1199,5 @@ function setupMocks({ mountOptionsMockData = {} }) {
const mountOptions = getMountOptions(mountOptionsMockData);
const wrapper = shallowMount(serviceLocation, mountOptions);
wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
wrapper.vm.$refs.mobileLocationQuestions.isMobileAddressComplete = jest.fn();
wrapper.vm.$refs.mobileLocationQuestions.resetAlerts = jest.fn();
wrapper.vm.$refs.mobileLocationQuestions.openModal = jest.fn();
return { wrapper, apiPromise };
}

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

@ -89,24 +89,14 @@
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<mobileLocationModalQuestions
customComponentId="mobileLocationQuestions"
v-show="selectedAppointmentType === 'Mobile'"
v-model="mobileLocationQuestions"
:mobileFeePart="mobileFeePart"
:mobileFeeApplies="mobileFeeApplies"
@updated-mobile-fee-part="setMobileFeePart"
@updated-recycle-fee-part="setRecycleFeePart"
@updated-serviceability="setServiceabilityDetails"
@updated-contains-military-base="setContainsMilitaryBase"
@updated-mobile-ctu="setCtuForMobile"
validationRules="mobile-location-required"
ref="mobileLocationQuestions"
linkWidgetName="MobileLocationLinkWidget"
modalWidgetName="MobileLocationModalWidget"
@setMobileLocation="setMobileLocationQuestions"
@set-mobile-location-invalid="setMobileLocationInValid" />
<div class="text-center">
<textBlock
v-if="mobileFeeApplies && isMobileSelected"
:customText="mobileFeeText"
cmsWidgetName="MobileFeeDisclaimerWidget"
typeStyle="caption"
class="ps-4 pe-4 mt-4" />
</div>
<shopQuestion
ref="shopQuestion"
v-show="isShopQuestionDisplayed"
@ -134,7 +124,6 @@
// Components
import alert from "@/ux-components/alert/alert";
import serviceZipModalQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-modal-question";
import mobileLocationModalQuestions from "@/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions";
import appointmentTypeQuestion from "@/layouts/service-location/appointment-type-question/appointment-type-question";
import shopQuestion from "@/layouts/service-location/shop-question/shop-question";
@ -144,6 +133,7 @@ import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-heade
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
import { Form } from "vee-validate";
import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal";
import textBlock from "@/digital-components/text-block/text-block";
// Supporting files
import baseMixin from "@/mixins/base-mixin.js";
@ -301,20 +291,8 @@ export default {
this.$nextTick();
},
},
mobileLocationQuestions: {
get: function () {
return {
addressQuestions: {
streetAddress: this.streetAddress,
apartmentNumberOrBusinessName: this.apartmentNumberOrBusinessName,
city: this.city,
state: this.state,
zipCode: this.zipCode,
},
isVehicleProtected: this.isVehicleProtected,
isMobileSelected: this.selectedAppointmentType == AppointmentTypeStrings.MOBILE,
};
},
isMobileSelected() {
return this.selectedAppointmentType == AppointmentTypeStrings.MOBILE;
},
isServiceableMobile() {
if (this.isRecalibrationServiceableMobile !== null) {
@ -357,6 +335,20 @@ export default {
return this.mobileFeeHasPrice;
}
},
mobileFeeText() {
const cmsContentText = this.getCmsContent("MobileFeeDisclaimerWidget", "Text");
return cmsContentText.replaceAll("{custom:mobileFee}", this.mobileFee);
},
mobileFee() {
if (!this.mobileFeePart) {
return 0;
}
return (
this.mobileFeePart.laborAmount +
this.mobileFeePart.sellingPrice +
this.mobileFeePart.kitPrice
);
},
showMobileFreeAlert() {
if (this.isServiceableMobile && !this.isInsurance && !this.mobileFeeHasPrice) {
return true;
@ -516,32 +508,6 @@ export default {
setRecycleFeePart(recycleFeePart) {
this.recycleFeePart = recycleFeePart;
},
//creating async function as the computed property can not directly handle asynchronous operations or promises.
async setMobileLocationQuestions(newValue) {
var newZipCode = newValue.addressQuestions.zipCode;
if (newZipCode !== this.zipCode) {
await getShopProviderData(newZipCode).then((result) => {
if (this.isServiceableMobile) {
this.shopProviderData = result.data;
this.selectedProvider = new Provider(
this.shopProviderData.mobileProviderNumber
);
}
});
}
if (this.isServiceableMobile) {
this.setMobileLocation(newValue);
this.setMobileLocationInValid(false);
} else {
await getZipCodeData(newZipCode).then((zipCodeData) => {
this.serviceZipCodeQuestion = {
state: zipCodeData.state,
zipCode: newZipCode,
zipCodeCtu: zipCodeData.zipCodeCtu,
};
});
}
},
getCarIdfromStore() {
return store.getters.vehicle.carId;
},
@ -590,15 +556,6 @@ export default {
this.isRecalibrationServiceableMobile =
serviceabilityDetails.isRecalibrationServiceableMobile;
},
setMobileLocation(mobileLocation) {
this.streetAddress = mobileLocation.addressQuestions.streetAddress;
this.apartmentNumberOrBusinessName =
mobileLocation.addressQuestions.apartmentNumberOrBusinessName;
this.city = mobileLocation.addressQuestions.city;
this.state = mobileLocation.addressQuestions.state;
this.zipCode = mobileLocation.addressQuestions.zipCode;
this.isVehicleProtected = mobileLocation.isVehicleProtected;
},
async reloadShopData(zipCode) {
await this.$refs.shopQuestion.reloadShopData(zipCode);
},
@ -755,13 +712,49 @@ export default {
this.updateAndSaveSupportingItems();
this.updateAndSaveIsMSRFeeApplicable();
this.$router.navigateWithSaving(
this.navigationScenarios.CLICKED_FORWARD,
this.pageName
//mocked schedule and should be clear when implement schedule page.
this.dispatchStoreAction(
this.storeActions.SAVE_SCHEDULE,
this.getTimeSlotInfo(),
false
);
if (this.selectedAppointmentType == AppointmentTypeStrings.MOBILE) {
//navigate to mobile details page
this.$router.navigateWithSaving(
this.navigationScenarios.CLICKED_FORWARD_WITH_MOBILE_SERVICE,
this.pageName
);
} else {
this.$router.navigateWithSaving(
this.navigationScenarios.CLICKED_FORWARD,
this.pageName
);
}
},
setMobileLocationInValid(isMobileLocationInValid) {
this.isMobileAddressValid = !isMobileLocationInValid;
getTimeSlotInfo() {
// Get the current date
const currentDate = new Date();
// Add 10 days to the current date
currentDate.setDate(currentDate.getDate() + 10);
// Format the date as yyyy-mm-dd
const year = currentDate.getFullYear();
const month = String(currentDate.getMonth() + 1).padStart(2, "0");
const day = String(currentDate.getDate()).padStart(2, "0");
const formattedDate = `${year}-${month}-${day}`;
return {
date: formattedDate,
endTime: "12:00",
jobMaxMinutes: "180",
jobMinMinutes: "120",
routeCode: "3357I-03357-M-I*20988*AM",
startTime: "08:00",
};
},
},
watch: {
@ -787,16 +780,6 @@ export default {
this.selectedProvider = new Provider(
this.shopProviderData.mobileProviderNumber
);
if (this.zipCode == this.getServiceZipCodeFromStore()) {
//restore mobile address from store in case user make changes to address but not commit it.
this.streetAddress = this.getServiceAddressFromStore();
this.apartmentNumberOrBusinessName = this.getServiceAddress2FromStore();
this.city = this.getServiceCityFromStore();
this.isVehicleProtected = this.getIsVehicleProtectedFromStore();
} else {
this.resetMobileLocation();
}
this.$refs.mobileLocationQuestions.resetAlerts();
} else {
this.selectedProvider = new Provider();
}
@ -807,7 +790,6 @@ export default {
alert,
serviceZipModalQuestion,
appointmentTypeQuestion,
mobileLocationModalQuestions,
funnelHeader,
navbar,
funnelSubHeader,
@ -815,6 +797,7 @@ export default {
loadingModal,
contentGroupModal,
shopQuestion,
textBlock,
},
};
</script>

6
src/router/constants/navigation-scenarios.js
View file

@ -49,6 +49,12 @@ const navigationScenarios = {
// Insurance-Company
CLICKED_PAY_ON_MY_OWN: "CLICKED_PAY_ON_MY_OWN",
//Service-Location
CLICKED_FORWARD_WITH_MOBILE_SERVICE: "CLICKED_FORWARD_WITH_MOBILE_SERVICE",
//Customer-details
CLICKED_BACK_WITH_MOBILE_SERVICE: "CLICKED_BACK_WITH_MOBILE_SERVICE",
// Schedule
CLICKED_CHANGE_LOCATION: "CLICKED_CHANGE_LOCATION",

4
src/router/constants/routes.js
View file

@ -68,6 +68,10 @@ export const routeData = {
name: "schedule",
path: "/schedule",
},
MOBILE_DETAILS: {
name: "mobile-details",
path: "/mobile-details",
},
CUSTOMER_DETAILS: {
name: "customer-details",
path: "/customer-details",

21
src/router/constants/routing-table.js
View file

@ -460,6 +460,10 @@ const routingTable = function () {
scenario: navigationScenarios.CLICKED_FORWARD,
destinationPageData: routeData.SCHEDULE,
},
{
scenario: navigationScenarios.CLICKED_FORWARD_WITH_MOBILE_SERVICE,
destinationPageData: routeData.MOBILE_DETAILS,
},
],
},
{
@ -479,6 +483,19 @@ const routingTable = function () {
},
],
},
{
pageName: routeData.MOBILE_DETAILS.name,
maps: [
{
scenario: navigationScenarios.CLICKED_BACK,
destinationPageData: routeData.SERVICE_LOCATION,
},
{
scenario: navigationScenarios.CLICKED_FORWARD,
destinationPageData: routeData.CUSTOMER_DETAILS,
},
],
},
{
pageName: routeData.CUSTOMER_DETAILS.name,
maps: [
@ -486,6 +503,10 @@ const routingTable = function () {
scenario: navigationScenarios.CLICKED_BACK,
destinationPageData: routeData.SCHEDULE,
},
{
scenario: navigationScenarios.CLICKED_BACK_WITH_MOBILE_SERVICE,
destinationPageData: routeData.MOBILE_DETAILS,
},
{
scenario: navigationScenarios.CLICKED_FORWARD,
destinationPageData: routeData.PAYMENT_METHOD,

1
src/router/methods/routes.js
View file

@ -37,6 +37,7 @@ export const routes = [
createRoute(routeData.PAYMENT_PIA_RETURN),
createRoute(routeData.CONFIRMATION),
createRoute(routeData.RETURN_USER),
createRoute(routeData.MOBILE_DETAILS),
// Virtual pages (resolve to a non-virtual page.)
createVirtualRoute(routeData.LANDING, landingBeforeEnter),

9
src/store/index.js
View file

@ -425,6 +425,12 @@ export const mutations = {
},
};
},
updateMobileDetails(state, mobileDetails) {
state.order.serviceLocation.address = mobileDetails.address;
state.order.serviceLocation.address2 = mobileDetails.address2;
state.order.serviceLocation.city = mobileDetails.city;
state.order.serviceLocation.isVehicleProtected = mobileDetails.isVehicleProtected;
},
updateServiceLocationTechNotes(state, techNotes) {
state.order.serviceLocation.techNotes = techNotes;
},
@ -3238,6 +3244,9 @@ export const actions = {
context.commit(storeMutations.UPDATE_SERVICE_LOCATION, serviceLocationInfo);
},
saveMobileDetails(context, mobileDetails) {
context.commit(storeMutations.UPDATE_MOBILE_DETAILS, mobileDetails);
},
saveServiceLocationTechNotes(context, techNotesInfo) {
context.commit(storeMutations.UPDATE_SERVICE_LOCATION_TECH_NOTES, techNotesInfo);