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

CSR-1503: fix issue and remove time from date logic

Browse source
This commit is contained in:
Adam Caouette 2023-07-14 10:45:49 -04:00
parent 34ffb0d793
commit 3fa79438b8
5 changed files with 242 additions and 187 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -74,6 +74,10 @@ import loader from "@/ux-components/loader/loader";
import store from "@/store";
import { TIMINGFUNC_MAP, BUFFER_OFFSET, MONTHS_OF_YEAR } from "./mixins/constants";
import { selectableDaysOptions, requiredParameter, forceTwoDigitString } from "./mixins/helpers";
import {
convertDateToDateString,
convertDateStringToDate,
} from "@/layouts/schedule/helpers/schedule-helper";
export default {
name: "datePicker",
@ -110,23 +114,14 @@ export default {
},
},
computed: {
today() {
if (this.todayOverrideDateString) {
return new Date(this.todayOverrideDateString + "T00:00:00");
}
return new Date();
},
todayMonthIndex() {
return this.today.getMonth() + 1;
},
todayYearNum() {
return this.today.getFullYear();
todayString() {
return this.todayOverrideDateString || convertDateToDateString(new Date());
},
todayDayIndex() {
return this.today.getDay();
return convertDateStringToDate(this.todayString).getDay();
},
todayDateNum() {
return this.today.getDate();
return convertDateStringToDate(this.todayString).getDate();
},
currentWeekStartDateNum() {
return this.todayDayIndex >= this.todayDateNum
@ -157,154 +152,187 @@ export default {
fireDateClickedEvent() {
this.$emit("date-clicked");
},
getWeekStartDate(date) {
getWeekStartDate(dateString) {
const date = convertDateStringToDate(dateString);
const dayOfWeek = date.getDay();
// Subtract the day of the week from date to get the date of Sunday
const sunday = new Date(date);
sunday.setDate(sunday.getDate() - dayOfWeek);
return sunday;
return convertDateToDateString(sunday);
},
getWeekEndDate(date) {
getWeekEndDate(dateString) {
const date = convertDateStringToDate(dateString);
const dayOfWeek = date.getDay();
const daysUntilSaturday = 6 - dayOfWeek; // Calculate the number of days until Saturday
// Clone the given date and add the remaining days until Saturday
const saturday = new Date(date);
saturday.setDate(date.getDate() + daysUntilSaturday);
return saturday;
return convertDateToDateString(saturday);
},
getNextWeekSunday(date) {
getNextWeekSunday(dateString) {
const date = convertDateStringToDate(dateString);
const dayOfWeek = date.getDay();
const daysUntilNextSunday = 7 - dayOfWeek; // Calculate the number of days until the next Sunday
// Clone the given date and add the remaining days until Sunday
const nextSunday = new Date(date);
nextSunday.setDate(date.getDate() + daysUntilNextSunday);
return nextSunday;
return convertDateToDateString(nextSunday);
},
getInitialViewWeeks(today, initialViewRowsToShow, preSelectedDateString) {
getMonthEnd(dateStr) {
// convert string to date, do date calc, then return a string back
const date = new Date(dateStr.split("-")[0], parseInt(dateStr.split("-")[1]), 0);
return convertDateToDateString(date);
},
getInitialViewWeeks(todayString, initialViewRowsToShow, preSelectedDateString) {
// 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) initialViewRowsToShow = 26;
if (preSelectedDateString) {
let preSelectedDateMonthEnd = this.getMonthEnd(preSelectedDateString);
let weekIncludesPreSelectedMonthEnd = false;
let i = 0;
while (!weekIncludesPreSelectedMonthEnd) {
if (i > 0) {
weekStartDate = this.getNextWeekSunday(weekEndDate);
weekEndDate = this.getWeekEndDate(weekStartDate);
let weekStartDate = this.getWeekStartDate(today);
let weekEndDate = this.getWeekEndDate(today);
for (let i = 0; i < initialViewRowsToShow; i++) {
if (i > 0) {
weekStartDate = this.getNextWeekSunday(weekEndDate);
weekEndDate = this.getWeekEndDate(weekStartDate);
}
weeks.push({
weekNum: i + 1,
weekStartDate: weekStartDate,
weekEndDate: weekEndDate,
});
if (
preSelectedDateString &&
new Date(preSelectedDateString + "T00:00:00") < weekEndDate
) {
break;
}
}
// are any of these weeks split between two months?
// NOTE: a week split between two months counts as 2 weeks
const hasSplitWeek = (week) => {
return week.weekStartDate.getMonth() !== week.weekEndDate.getMonth() ? true : false;
};
const splitWeekIndex = weeks.findIndex(hasSplitWeek);
if (!preSelectedDateString && splitWeekIndex > -1) {
// a preSelectedDateString precludes split week logic
const week1 = [];
const week2 = [];
let switchToWeek2 = false;
for (let j = 0; j < 7; j++) {
const newDate = new Date(weeks[splitWeekIndex].weekStartDate);
newDate.setDate(newDate.getDate() + j);
if (newDate.getDate() === 1) switchToWeek2 = true;
if (switchToWeek2) {
week2.push(newDate);
} else {
week1.push(newDate);
}
}
const week1EndDate = week1[week1.length - 1];
const week2StartDate = week2[0];
if (week1EndDate < today) {
// replace week 1 with week 2
weeks[splitWeekIndex].weekStartDate = week2StartDate;
} else {
const newWeek = {
weekNum: weeks[splitWeekIndex].weekNum,
weekStartDate: week2StartDate,
weekEndDate: weeks[splitWeekIndex].weekEndDate,
};
weeks[splitWeekIndex].weekEndDate = week1EndDate;
weeks.splice(splitWeekIndex + 1, 0, newWeek);
weeks.pop();
weeks.forEach((item, index) => {
if (index > splitWeekIndex) {
item.weekNum = item.weekNum + 1;
if (
(preSelectedDateMonthEnd > weekStartDate &&
preSelectedDateMonthEnd < weekEndDate) ||
preSelectedDateMonthEnd === weekStartDate ||
preSelectedDateMonthEnd === weekEndDate
) {
weekEndDate = preSelectedDateMonthEnd;
weekIncludesPreSelectedMonthEnd = true;
}
}
weeks.push({
weekNum: i + 1,
weekStartDate: weekStartDate,
weekEndDate: weekEndDate,
});
i++;
}
} else {
for (let i = 0; i < initialViewRowsToShow; i++) {
if (i > 0) {
weekStartDate = this.getNextWeekSunday(weekEndDate);
weekEndDate = this.getWeekEndDate(weekStartDate);
}
weeks.push({
weekNum: i + 1,
weekStartDate: weekStartDate,
weekEndDate: weekEndDate,
});
}
// If any of these weeks is split between two months, then make them 2 separate "weeks"
// (a week split between two months is considered 2 weeks per business requirements)
const hasSplitWeek = (week) => {
return week.weekStartDate.split("-")[1] !== week.weekEndDate.split("-")[1]
? true
: false;
};
const splitWeekIndex = weeks.findIndex(hasSplitWeek);
if (splitWeekIndex > -1) {
const week1 = [];
const week2 = [];
let switchToWeek2 = false;
for (let j = 0; j < 7; j++) {
const newDate = convertDateStringToDate(
weeks[splitWeekIndex].weekStartDate
);
newDate.setDate(newDate.getDate() + j);
if (newDate.getDate() === 1) switchToWeek2 = true;
if (switchToWeek2) {
week2.push(convertDateToDateString(newDate));
} else {
week1.push(convertDateToDateString(newDate));
}
}
const week1EndDate = week1[week1.length - 1];
const week2StartDate = week2[0];
if (week1EndDate < todayString) {
// replace week 1 with week 2
weeks[splitWeekIndex].weekStartDate = week2StartDate;
} else {
const newWeek = {
weekNum: weeks[splitWeekIndex].weekNum,
weekStartDate: week2StartDate,
weekEndDate: weeks[splitWeekIndex].weekEndDate,
};
weeks[splitWeekIndex].weekEndDate = week1EndDate;
weeks.splice(splitWeekIndex + 1, 0, newWeek);
weeks.pop();
weeks.forEach((item, index) => {
if (index > splitWeekIndex) {
item.weekNum = item.weekNum + 1;
}
});
}
}
}
return weeks;
},
async loadInitialData(config) {
let todayDate;
if (this.today) {
todayDate = this.today;
} else if (config.todayOverrideDateString) {
todayDate = new Date(config.todayOverrideDateString + "T00:00:00");
} else {
todayDate = new Date();
}
const todayMonthIndex = todayDate.getMonth() + 1;
const todayYearNum = todayDate.getFullYear();
// TODO - set up currentMonthStart if direction is PAST:
// let currentMonthStart = new Date(todayYearNum, todayMonthIndex - 1, 1);
const currentMonthEnd = new Date(todayYearNum, todayMonthIndex, 0);
/*
** NOTE: this _could_ be called by a parent before fully loaded, so data or computeds might not be available
*/
let todayDateString;
let calendarViewDirection = "none";
if (config.selectableDatesSetting === "past") calendarViewDirection = "past";
if (config.selectableDatesSetting === "custom") calendarViewDirection = "future";
const initialViewWeeks = this.getInitialViewWeeks(
todayDate,
config.initialViewRowsToShow,
config.preSelectedDate
);
const initialViewStartDate = todayDate;
const initialViewEndDate = initialViewWeeks[initialViewWeeks.length - 1].weekEndDate;
const firstSaturdayMonth = initialViewWeeks[0].weekEndDate.getMonth();
const lastSundayMonth =
initialViewWeeks[initialViewWeeks.length - 1].weekStartDate.getMonth();
let hideSomeDaysForInitialView = false;
let hideSecondMonth = false;
// TODO - NEED TO CREATE OPPOSITE LOGIC FOR "past" DIRECTION LIKE BELOW v v v
if (calendarViewDirection === "future" && !config.preSelectedDate) {
if (firstSaturdayMonth !== lastSundayMonth) {
hideSomeDaysForInitialView = true;
}
if (initialViewStartDate.getMonth() === lastSundayMonth) {
hideSecondMonth = true;
if (currentMonthEnd > initialViewEndDate) {
// should part of 1st month be hidden?
if (this.todayString) {
todayDateString = this.todayString;
} else if (config.todayOverrideDateString) {
todayDateString = config.todayOverrideDateString;
} else {
todayDateString = convertDateToDateString(new Date());
}
if (config.selectableDatesSetting === "past") calendarViewDirection = "past";
if (config.selectableDatesSetting === "custom") calendarViewDirection = "future";
const currentMonthEnd = this.getMonthEnd(todayDateString);
// TODO - set up currentMonthStart if direction is PAST:
// let currentMonthStart = new Date(todayYearNum, todayMonthIndex - 1, 1);
const initialViewWeeks = this.getInitialViewWeeks(
todayDateString,
config.initialViewRowsToShow,
config.preSelectedDate
);
const initialViewStartDate = todayDateString;
const initialViewEndDate = initialViewWeeks[initialViewWeeks.length - 1].weekEndDate;
if (!config.preSelectedDate) {
const firstSaturdayMonth = initialViewWeeks[0].weekEndDate.split("-")[1];
const lastSundayMonth =
initialViewWeeks[initialViewWeeks.length - 1].weekStartDate.split("-")[1];
if (calendarViewDirection === "future") {
if (firstSaturdayMonth !== lastSundayMonth) {
hideSomeDaysForInitialView = true;
}
if (initialViewStartDate.split("-")[1] === lastSundayMonth) {
hideSecondMonth = true;
if (currentMonthEnd > initialViewEndDate) {
// should part of 1st month be hidden?
hideSomeDaysForInitialView = true;
}
}
}
// TODO - NEED TO CREATE OPPOSITE LOGIC FOR "past" DIRECTION LIKE THE ABOVE ^ ^ ^
}
const loadInitialDataPromise = new Promise((resolve, reject) => {
const response = config.customSelectableDatesCallback(
initialViewStartDate.toISOString().split("T")[0],
initialViewEndDate.toISOString().split("T")[0],
initialViewStartDate,
initialViewEndDate,
store.getters.order.serviceLocation.appointmentType,
store.getters.order.serviceLocation.provider.providerNumber
);
@ -313,7 +341,7 @@ export default {
return loadInitialDataPromise.then((response) => {
const initialData = {
todayDate: todayDate,
todayDate: todayDateString,
initialViewStartDate: initialViewStartDate,
initialViewEndDate: initialViewEndDate,
calendarViewDirection: calendarViewDirection,
@ -329,7 +357,7 @@ export default {
this.hideSomeDaysForInitialView = config.hideSomeDaysForInitialView;
const hideSecondMonth = config.hideSecondMonth;
const direction = config.calendarViewDirection;
const monthsAfterToLoadOffset = 12;
const monthsAfterToLoadOffset = 6;
const monthsBeforeToLoadOffset = 36;
config.initialShopTimeSlotsResponse.days.forEach((selectableDate) => {
this.selectableDatesData.push(selectableDate);
@ -371,6 +399,13 @@ export default {
const monthToShow = this.months.find((month) =>
month.monthClass.includes("month-preselected")
);
if (
monthToShow.monthClass.includes("month-preselected") &&
monthToShow.monthClass.includes("last-available-month")
) {
// disable View More dates button if the preSelectedDate in the last available month
this.disableViewMoreDatesButton = true;
}
this.scrollToElement(monthToShow.monthString);
});
}
@ -390,32 +425,37 @@ export default {
this.hideSomeDaysForInitialView (string)
*/
let monthIndex = this.todayMonthIndex + offset; // mutable
let yearNum = this.todayYearNum; // mutable
let monthNum = convertDateStringToDate(this.todayString).getMonth() + offset + 1;
let yearNum = convertDateStringToDate(this.todayString).getFullYear();
const calendarViewDirection = options.calendarViewDirection;
const initialViewStartDate = options.initialViewStartDate;
const initialViewEndDate = options.initialViewEndDate;
const hideSecondMonth = options.hideSecondMonth;
const preSelectedDateObj = options.preSelectedDate
? new Date(options.preSelectedDate + "T00:00:00")
: null;
const dates = [];
let monthClass = "";
let isMonthThatHidesSomeDaysForInitialView;
if (calendarViewDirection === "future" && offset > 0) {
while (monthIndex > 12) {
monthIndex = monthIndex - 12;
while (monthNum > 12) {
monthNum = monthNum - 12;
yearNum++;
}
} else if (calendarViewDirection === "past" && offset < 0) {
while (monthIndex < 1) {
monthIndex = 12 + monthIndex;
while (monthNum < 1) {
monthNum = 12 + monthNum;
yearNum--;
}
}
const initialViewEndDate = options.initialViewEndDate;
// const initialViewStartDate = options.initialViewStartDate; // TODO: to be used for past calendarViewDirection
const hideSecondMonth = options.hideSecondMonth;
const preSelectedDateObj = options.preSelectedDate
? convertDateStringToDate(options.preSelectedDate)
: null;
const dates = [];
const monthEndDate = new Date(yearNum, monthNum, 0);
const monthStartDateNum =
offset === 0 && calendarViewDirection === "future"
? this.currentWeekStartDateNum
: 1;
const monthStartDate = new Date(yearNum, monthNum - 1, monthStartDateNum);
const startDateDayIndex = monthStartDate.getDay();
const monthEndDate = new Date(yearNum, monthIndex, 0);
let monthClass = "";
let isMonthThatHidesSomeDaysForInitialView;
let monthEndDateNum = monthEndDate.getDate();
if (
@ -426,16 +466,7 @@ export default {
monthEndDateNum = this.currentWeekEndDateNum;
}
const monthStartDateNum =
offset === 0 && calendarViewDirection === "future"
? this.currentWeekStartDateNum
: 1;
const monthStartDate = new Date(yearNum, monthIndex - 1, monthStartDateNum);
const startDateDayIndex = monthStartDate.getDay();
const endDateDayIndex = monthEndDate.getDay();
if (preSelectedDateObj) {
if (options.preSelectedDate) {
if (
monthStartDate.getFullYear() === preSelectedDateObj.getFullYear() &&
monthStartDate.getMonth() === preSelectedDateObj.getMonth()
@ -472,9 +503,9 @@ export default {
const dateString =
yearNum.toString() +
"-" +
forceTwoDigitString(monthIndex) +
('0'+ monthNum).slice(-2) +
"-" +
forceTwoDigitString(i);
('0'+ i).slice(-2);
if (offset === 0 && i === this.todayDateNum) {
dayClasses += "current-day";
@ -487,8 +518,8 @@ export default {
}
if (
this.hideSomeDaysForInitialView &&
initialViewEndDate.getMonth() + 1 === monthIndex &&
initialViewEndDate.getDate() < i
convertDateStringToDate(initialViewEndDate).getMonth() + 1 === monthNum &&
convertDateStringToDate(initialViewEndDate).getDate() < i
) {
dayClasses += "day-hidden";
isMonthThatHidesSomeDaysForInitialView = true;
@ -506,9 +537,9 @@ export default {
}
const monthToAdd = {
monthLabel: MONTHS_OF_YEAR[monthIndex - 1],
monthIndex: monthIndex,
monthString: MONTHS_OF_YEAR[monthIndex - 1] + "-" + yearNum?.toString(),
monthLabel: MONTHS_OF_YEAR[monthNum - 1],
monthIndex: monthNum,
monthString: MONTHS_OF_YEAR[monthNum - 1] + "-" + yearNum?.toString(),
yearNum: yearNum,
dates: dates,
startDateDayIndex: startDateDayIndex,
@ -840,12 +871,15 @@ export default {
}
&.current-day {
label {
font-weight: 700;
color: $black;
&:after {
content: "";
width: 0.25rem;
height: 0.25rem;
border-radius: 50%;
background-color: $blue;
background-color: $black;
position: absolute;
top: 28px;
}

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

@ -7,9 +7,4 @@ const requiredParameter = () => {
throw new Error("parameter is required");
};
const forceTwoDigitString = (monthNum) => {
const newString = monthNum.toString();
return newString.length === 1 ? "0" + newString : newString;
};
export { selectableDaysOptions, requiredParameter, forceTwoDigitString };
export { selectableDaysOptions, requiredParameter };

27
src/layouts/schedule/helpers/schedule-helper.js
View file

@ -18,3 +18,30 @@ export function calcDaysBetweenDates(dateString1, dateString2) {
const timeDifference = Math.abs(date2 - date1); // Calculate the time difference in milliseconds
return Math.ceil(timeDifference / (1000 * 60 * 60 * 24)); // Convert milliseconds to days
}
export function convertDateToDateString(date) {
// returns YYYY-MM-DD format
if (date instanceof Date !== true) return;
return (
date.getFullYear() +
"-" +
("0" + (date.getMonth() + 1)).slice(-2) +
"-" +
("0" + date.getDate()).slice(-2)
);
}
export function convertDateStringToDate(dateString) {
// dateString must be YYYY-MM-DD format
if (typeof dateString !== "string") return;
const dateParts = dateString.split("-");
return new Date(dateParts[0], parseInt(dateParts[1]) - 1, dateParts[2]);
}
export function sumDateString(dateString, daysToAdd) {
// dateString must be YYYY-MM-DD format
if (typeof dateString !== "string") return;
const date = convertDateStringToDate(dateString);
date.setDate(date.getDate() + daysToAdd);
return convertDateToDateString(date);
}

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

@ -64,7 +64,11 @@ import { storeActions } from "@/constants/store-actions";
import { settleAllPromises } from "@/helpers/layout-helper";
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
import { splitCopyOnCMSPlaceHolder } from "@/helpers/cms-content-helper";
import { calcDaysBetweenDates } from "@/layouts/schedule/helpers/schedule-helper";
import {
calcDaysBetweenDates,
convertDateStringToDate,
sumDateString,
} from "@/layouts/schedule/helpers/schedule-helper";
import { AppointmentTypeStrings, PREMIUM_FEE_PART_TYPE } from "@/constants/schedule-constants";
import { errorMessages } from "@/constants/error-messages";
import { required } from "@/helpers/validation-rules";
@ -82,46 +86,41 @@ const getAvailableDates = async (
appointmentType,
providerNumber
) => {
const apiEndDateLimit = new Date(startDateString + "T00:00:00");
const endDate = new Date(endDateString + "T00:00:00");
apiEndDateLimit.setDate(apiEndDateLimit.getDate() + TIME_SLOTS_CALL_DAYS_LIMIT);
// how many days are between startDate and endDate?
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 = {};
let apiStartDate = new Date(startDateString + "T00:00:00");
let apiEndDate = apiEndDateLimit;
timeSlotsData.days = [];
let apiStartDate = startDateString;
let apiEndDate = apiEndDateLimit;
for (let i = 1; i <= apiCallsCount; i++) {
let storeActionConfig;
if (i > 1) {
apiStartDate = new Date(apiEndDate);
apiStartDate.setDate(apiStartDate.getDate() + 1);
apiEndDate = new Date(apiStartDate);
apiEndDate.setDate(apiEndDate.getDate() + TIME_SLOTS_CALL_DAYS_LIMIT);
}
if (i === apiCallsCount) {
apiEndDate = new Date(endDateString + "T00:00:00");
apiStartDate = sumDateString(apiEndDate, 1);
apiEndDate = sumDateString(apiStartDate, TIME_SLOTS_CALL_DAYS_LIMIT);
if (i === apiCallsCount) {
apiEndDate = endDateString;
}
}
if (appointmentType === AppointmentTypeStrings.MOBILE) {
storeActionConfig = {
storeAction: storeActions.GET_MOBILE_TIME_SLOTS,
payload: {
startDate: apiStartDate.toISOString().split("T")[0],
endDate: apiEndDate.toISOString().split("T")[0],
startDate: apiStartDate,
endDate: apiEndDate,
},
};
} else {
storeActionConfig = {
storeAction: storeActions.GET_SHOP_TIME_SLOTS,
payload: {
startDate: apiStartDate.toISOString().split("T")[0],
endDate: apiEndDate.toISOString().split("T")[0],
startDate: apiStartDate,
endDate: apiEndDate,
shopAppointmentType: appointmentType,
providerNumber: providerNumber,
},
@ -382,12 +381,11 @@ export default {
);
}
}
this.$refs.funnelFooter.updateButtonText(funnelFooterButtonText);
},
convertSelectedDateToShortMonthAndDay(selectedDate) {
// This conversion ensures we don't get get GMT induced date changes
const dateObject = new Date(`${selectedDate}T00:00:00`);
const dateObject = convertDateStringToDate(selectedDate);
// Ex: April 25
return dateObject.toLocaleDateString("en-us", { month: "short", day: "numeric" });
},

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

@ -41,6 +41,7 @@
import modal from "@/digital-components/modal/modal";
import textBlock from "@/digital-components/text-block/text-block";
import buttonQuestion from "@/digital-components/button-question/button-question";
import { convertDateStringToDate } from "@/layouts/schedule/helpers/schedule-helper";
import timeSlotModalListButton from "./time-slot-modal-list-button/time-slot-modal-list-button";
// TODO: Move this somewhere more global
@ -257,7 +258,7 @@ export default {
}
// This conversion ensures we don't get get GMT induced date changes
const dateObject = new Date(`${this.dateAndTimeSlotData.date}T00:00:00`);
const dateObject = convertDateStringToDate(this.dateAndTimeSlotData.date);
// Ex: Tuesday, April 22
return dateObject.toLocaleDateString("en-us", {
weekday: "long",