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

Merge branch 'release/2025.07.10' into feature/CASH-926-cart-updates-v1

Browse source
This commit is contained in:
AdamCaouetteSafelite 2025-06-23 13:21:29 -04:00
commit 1da7b46ce2
5 changed files with 639 additions and 403 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

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

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

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

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

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

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

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